Develop Reference

Calling src from nearest audio tag to JavaScript function without ID

I'm attempting to play multiple locally stored mp3 files on a single html page. I want a single JavaScript function in a separate js file triggered onclick that will play the correct file referenced in the adjacent audio tag. The audio just needs to play through once every time it is tapped/clicked.
I've tried using querySelector and various other techniques to find the nearest audio tag, but it always defaults to the audio tag at the top of the page. How can I limit the scope of querySelect, or is there another method of doing what I want? I don't want to have to create a unique ID for every audio tag because there are dozens of pages like this I am making.
function PlaySound() {
var sound = document.querySelector(".audio");
sound.play()
}
<audio class="audio" src="../../audio/na.mp3" autostart="false"></audio><a onclick="PlaySound()">나</a>
<audio class="audio" src="../../audio/gak.mp3" autostart="false"></audio><a onclick="PlaySound()">각</a>

First of all, you should use a button, not an anchor tag for these. They are buttons, since they only do an action on the page. Links are something that takes you to another page.
Now for your issue: when an event listener is invoked, such as your PlaySound when onclick happens, you can give it a this argument, which is the DOM instance of the button clicked.
Now your audio is a simple previousElementSibling away from grabbing, meaning and you can easily invoke audio.play() on it.
function play (button) {
console.log('Button:', button.innerText)
const audio = button.previousElementSibling
console.log('Audio', audio)
}
<audio src="1"></audio>
<button onclick="play(this)">1</button>
<audio src="2"></audio>
<button onclick="play(this)">2</button>

What you could do is store the information that are held by the audio tags inside a JavaScript array and dynamically create the list of audio and the respective buttons.
var audioList = [{
src: "../../audio/na.mp3",
text: "나"
}, {
src: "../../audio/gak.mp3",
text: "각"
}];
var container = document.querySelector("#container");
audioList.forEach(function(audio) {
var audioElem = document.createElement("audio");
var button = document.createElement("button");
audioElem.setAttribute("autostart", false);
audioElem.setAttribute("src", audio.src);
button.textContent = audio.text;
audioElem.className = "audio";
button.addEventListener("click", getButtonListener(audioElem));
container.appendChild(audioElem);
container.appendChild(button);
});
function getButtonListener(audioElem) {
return function() {
audioElem.play();
console.log("Playing:" + audioElem.src);
};
}
<div id="container"></div>
Or you could just do:
var audioList = {
"나": "../../audio/na.mp3",
"각": "../../audio/gak.mp3"
};
function openAudio(target){
document.querySelector("audio[src='" + audioList[target.textContent] + "']").play();
console.log("Playing: " + audioList[target.textContent]);
}
<audio class="audio" src="../../audio/na.mp3" autostart="false"></audio>
<button onclick="openAudio(this)">나</button>
<audio class="audio" src="../../audio/gak.mp3" autostart="false"></audio>
<button onclick="openAudio(this)">각</button>

Trying to toggle a twitch player on/off using javascript in HTML

So I'm trying to learn some HTML5 stuff for making my own website from scratch. One thing I wanted to try was putting twitch chat and player in the web page. Iwant it to start the page with the player absent and the buttons available to be used to turn the player + chat on or off. Been trying to wrap my head around this and I can't find the solution I'm looking for. Would appreciate any tips or hints on how to do it, thanks!
Display/Hide Player
Display/Hide Chat
<script>
var playeron = false;
function player()
{
if(playeron==false)
{
playeron=true;
document.getElementById("MyPlayer").style.display="block";
}
else
{
playeron=false;
document.getElementById("MyPlayer").style.display="none";
}
}
var chaton=false;
function chat()
{
if(chaton==false)
{
chaton=true;
document.getElementById("MyChat").style.display="block";
}
else
{
chaton=false;
document.getElementById("MyChat").style.display="none";
}
}
</script>
<iframe id = "MyPlayer" src="https://player.twitch.tv/?volume=0.32&channel=blackdahlia1147" width="1280" height="720"></iframe>
<iframe id = "MyChat" src="https://www.twitch.tv/blackdahlia1147/chat?popout=" width="300" height="720"></iframe>

<script>
var playeron=false;
var chaton=false;
function player(){
if(playeron==false){
playeron=true;
document.getElementById("MyPlayer").style.display="block";
}else{
playeron=false;
document.getElementById("MyPlayer").style.display="none";
}
}
//try it yourself for chat
</script>
Display/Hide player
Display/Hide Chat
<style>
iframe{
display:none;
}
</style>

you missed an opening bracket after function twitch(toggle)

Display/Hide Player
Display/Hide Chat
<iframe id="MyPlayer" src="https://player.twitch.tv/?volume=0.32&channel=blackdahlia1147" width="1280" height="720" style="display: block;"></iframe>
<iframe id="MyChat" src="https://www.twitch.tv/blackdahlia1147/chat?popout=" width="300" height="720" style="display: block;"></iframe>
<script>
function toggle(id) {
var elem = document.getElementById(id);
if (elem.style.display != 'none') {
elem.style.display = 'none';
} else {
elem.style.display = 'block';
}
}
</script>
This will work for you, with the advantage of flexibility if you want to make more things to hide/display.

I ran your code and I found that your trying to use variables with links in a if else loop. Now, what I'm saying is you created an option for a loop to search, which is good if you want to create multiple channels for a user to search.
else
{
player = "https://player.twitch.tv/?volume=0.32&channel=blackdahlia1147"
chat = "https://www.twitch.tv/blackdahlia1147/chat?popout="
}
what you first need to do is learn to add a "plugin" into your HTML if you want those two channels only. Your "player" and "chat" are links to a website, a "plugin" is what you're looking for. Go to youtube and type "plugin", when you get your "plugin" then write:
<iframe src="plugin"></iframe>
You really don't need the js at this point.
"Onclick" is what you're also looking for. Go to w3school.com and they have great options of buttons and animation options.

JS/JQuery text to speech: How to chain audios?

Given n different words:
var text = [ "bèijing Beijing Shanghai"]
var words= [ "bèijing", "Beijing", "Shanghai" ];
Given n different .ogg audio files with a known locations :
<!-- AUDIOS FILES -->
<audio id="id1" src="/audio/Zh-bèijing.ogg"></audio>
<audio id="id2" src="/audio/Zh-Beijing.ogg"></audio>
<audio id="id3" src="/audio/Zh-Shanghai.ogg"></audio>
I use JS getElementById('...').play(), which I run using an onclick event over an HTML element:
<!-- HTML -->
<div id="play" onClick="document.getElementById('id1').play();">
<button>Play</button>
</div>
This allow me to play one audiofile.
Using one single onlick event, how play the first audio, then when done chain to it the play of a second audio ?
Starting fiddles with assets there : http://jsfiddle.net/J9wAB/
Note: I tried document.getElementById('id1').play().done(document.getElementById('id2').play()), but it plays both files simultaneously.
EDIT: I accepted one answer working on Firefox. Yet, this addEventListener based answer fails on on some browsers. An alternative promise base answer may be more successful.

Something like this :
$('#play').data('audio', $('audio:first')).on('click', function() {
var self = this;
$(this).data('audio').on('ended', function() {
var n = $('audio').eq( $(self).data('audio').index('audio') + 1 );
$(self).data('audio', n.length ? n : $('audio:first'));
}).get(0).play();
});
FIDDLE
It gets the first audio element in the document, and stores it in jQuery's data, and once it's played (the onended event) it get's the next audio element in the DOM and the next time the button is clicked, it playes that, and when there are no more audio elements, it starts from the beginning again.
If you really wan't to use the ID instead, it would be something like :
var audio = 1
$('#play').on('click', function() {
$('#id' + audio).get(0).play();
audio++;
});
FIDDLE
To play all three on a single click, one after the other, you'd do
$('#play').on('click', function() {
$('audio').on('ended', function() {
$('audio').eq($(this).index('audio')+1).get(0).play();
}).get(0).play();
});
FIDDLE

No jQuery needed, just listen for the ended event
The simple case is the following:
document.getElementById('id1').addEventListener('ended', function(){
document.getElementById('id2').play();
});
Abstracted, it would look like http://jsfiddle.net/J9wAB/13/
function chain(ids/* id, id, ... */) {
function setHandler(first, next) {
document.getElementById(first).addEventListener('ended', function(){
document.getElementById(next).play();
});
}
for (var i = 0; i < arguments.length - 1; i++) {
setHandler(arguments[i], arguments[i+1]);
}
}
chain('id1', 'id2', 'id3');

You can use the onended="yourcallback()" to start the next audio.
Look at this answer please: https://stackoverflow.com/a/7652194/2707424

Javascript -HTML5 audio controls when song is selected

Hi this is currently my code to play a song according to which image is selected:
Javascript
function Start (audioFile)
{
var audie = document.getElementById("myAudio");
audie.src = audioFile;
audie.play();
}
function Stop ()
{
var audie = document.getElementById("myAudio");
audie.pause();
}
HTML5
<img src="images/play.png" alt="Play Button width="37" height="30" onclick="Start('EL.mp3')">
How is it that i could show the HTML 5 audio player with all the controls as soon as the button is selected ? I would like to just have one control bar and everytime the playbutton is clicked the bar appears and maybe display the song that is currently playing .

First, i suggest using jquery for writing JavaScript.
HTML
<audio controls id="myAudio" style="display:none">
JavaScript
function Start (audioFile)
{
$("#myAudio").show();
...
}
function Stop ()
{
$("#myAudio").hide();
...
}

New to Javascript, need help with HTML5 audio "playlist"

im trying to create a sort of playlist feature that will work on the iPhone using a combination of HTML5 and javascript. I'm very new to the platform and I was hoping maybe someone here could help me identify the problem with my code. The first song properly autoplays, but when it ends the next one does not load and play. The javascript code for my site is provided below, thanks in advance. (my apologies if this code is terribly messed up, i assembled this from what iv learned and what i could find different places online)
<script type="text/javascript">
var songname="Bottoms Up";
var counter=1;
var totalsongs=3;
while (counter<=totalsongs-1) {
document.write(<h2>songname</h2>);
switch (counter) {
case 1:
var nextSong="audio/Hey.mp3";
var audioPlayer=document.getElementById('audioPlayer');
audioPlayer.onend = function() {
audioPlayer.src = nextSong;
songname="Hey";
counter=(counter+1);
if(counter>totalsongs-1) {
counter=1;
} //if close
} //onend function close
case 2:
var nextSong="audio/I Like It.mp3";
var audioPlayer=document.getElementById('audioPlayer');
audioPlayer.onend = function() {
audioPlayer.src = nextSong;
songname="I Like It";
counter=(counter+1);
if(counter>totalsongs-1) {
counter=1;
} //if close
} //onend function close
} //switch close
} //while close
</script>
<center><audio src="audio/Bottoms Up.mp3" autoplay controls /></center>

A few things:
Give the audio element an id:
<audio src="audio/Bottoms Up.mp3" autoplay controls id="audioPlayer" /></center>
Use arrays instead of many variables:
var songs=({{"title": "First title","filename":"firstfile.mp3"},
{"title": "Second title","filename":"secondfile.mp3"}});
Listen for the event ended like this:
document.getElementById("audioPlayer").addEventListener("ended", nextSong, false);
And put the script in the <head> element.

var audioPlayer=document.getElementById('audioPlayer');
… will error, since the element doesn't have an id.