Develop Reference

HTML - How to play and pause audio when clicking an image?

I've tried a code that I found here on this website, but for some reason it won't work. Hope someone here could help. It plays the song when I click the gif, but when I click the gif again, it just replays it.
Here's the code I used:
<img src="lilgif.gif" alt="Play Button" onclick="StartOrStop('boss.mp3')">
<audio id="myAudio"></audio>
Script:
function StartOrStop(audioFile) {
var audio = document.getElementById("myAudio");
if (!audio.src || audio.src !== audioFile) audio.src = audioFile;
if (audio.paused == false)
audio.pause();
else
audio.play();
}

Have this working example I made:
workign audio play pause on image
HTML:
<img id="startOrStopImg" src="http://wallpaper-gallery.net/images/dope-pictures/dope-pictures-17.jpg" alt="Play Button">
<audio id="audio" src="http://www.soundjig.com/pages/soundfx/futuristic.php?mp3=scifi21.mp3" type="audio/mp3" controls>
Your browser does not support the audio element.
</audio>
You can use with controls or without if you prefer to only interact with picture. Don't forget, older browsers don't have HTML5 audio, you should always place a text, image or something to tell user where is the problem. Good thing you did so with image (that one is in case image is broken or accessibility options enabled in browser)
Nothing special here only I put some ids for easy orientation and real file you can test on hosted remotely.
JS:
document.getElementById("startOrStopImg").onclick = function() {
var audio = document.getElementById("audio");
if (audio.paused) audio.play();
else audio.pause();
};
Basically, I bound function defensively (this is prefered to in HTML onclick binding) and written an anon function to handle it all as a value, since I am not using it elsewhere.
It simply accesses audio elements API to check if playing then either plays or pauses.
EDIT: I have fixed and put a remotely hosted image also for a complete example. Looks way better now.

can you enclose your if else statement in curly brackets please
like this.
if (audio.paused == false){
audio.pause();
}else{
audio.play();
}

How can i make three html audio elements work sequentially repeated using javascript

How can i make three HTML audio elements work sequentially repeated each one three times or more.
means I will make the first audio work three times, then the second work three times, then the third three times
I have this code, but i don't have an idea to make the audio elements repeated:
HTML & JavaScript:
function play(j){
var audio = document.getElementById('audio'+j); //declaring audio
audio.play(); //playing audio
audio.addEventListener('ended', function (){ //after audio ends, it will check weather it will play again or no
j++;
if(j<=3){
play(j);
}
})
}
<audio controls id="audio1">
<source src="http://learn.shayhowe.com.s3-website-us-east-1.amazonaws.com/assets/misc/courses/html-css/adding-media/jazz.ogg" type="audio/mpeg">
your browser doesn't support audio
</audio><br/>
<audio controls id="audio2">
<source src="http://learn.shayhowe.com.s3-website-us-east-1.amazonaws.com/assets/misc/courses/html-css/adding-media/jazz.ogg" type="audio/mpeg">
your browser doesn't support audio
</audio><br/>
<audio controls id="audio3">
<source src="http://learn.shayhowe.com.s3-website-us-east-1.amazonaws.com/assets/misc/courses/html-css/adding-media/jazz.ogg" type="audio/mpeg">
your browser doesn't support audio
</audio>
<button onclick="play(1)">run audio</button>

function play(j){
var audio = document.getElementById('audio'+Math.floor(j)); //declaring audio
audio.play(); //playing audio
audio.addEventListener('ended', function (){ //after audio ends, it will check weather it will play again or no
j+=1/3;
if(j<=3){
play(j);
}
})
}
Simply just increase by a third (and round the number if you use it), so that it plays three times...
Or more beautiful (using an double-recursive approach ;)):
function playthree(i){
(function play(c){
var audio = document.getElementById('audio'+i); //declaring audio
audio.play(); //playing audio
audio.addEventListener('ended', function (){ //after audio ends, it will check weather it will play again or no
if(c>=3 ){//if more than three per audio
if(i<3){//and not reached the last audio
playthree(i+1);//play next audio
}//else end all
}else{//we didnt reached the third play, lets keep going...
play(c+1);
}
});
})(1)//start with 1
}

Audio stops playing while moving to fallback mount using Icecast

I was wondering if someone has had a similar problem:
I have defined fallback mounts in Icecast2 so that one major stream plays at all times. If another fallback mount becomes active, the latter becomes the active.
I have tested the streams (mp3 format), with ffplay and the transition happens with no problem. The problem exists when I use an html5 audio tag to listen to the audio: transition does not happen automatically and I have to reload the browser and click play in order to listen to the stream. That is, using the browser, when the fallback stream gets enabled, the sound stops and I have to reload the browser and click play in order to listen[to the other stream]. The same problems occurs in all major browsers.
Here's an excerpt from my icecast.xml:
<mount>
<public>0</public>
<mount-name>/stream</mount-name>
<hidden>0</hidden>
</mount>
<mount>
<public>0</public>
<mount-name>/stream1</mount-name>
<fallback-mount>/stream</fallback-mount>
<fallback-override>1</fallback-override>
<username>stream1</username>
<password>pass</password>
<hidden>0</hidden>
</mount>
This is what ffplay shows while connecting and disconnecting from the secondary source:
The html5 code that plays the audio is as follows:
<audio controls>
<source src="http://127.0.0.1:3333/stream1" type="audio/mpeg">
</audio>

I got this finally working by going as follows:
First I noticed that when I switched from one mount point to another by enabling the source, the audio stopped playing. I set up a timer to fire every 1 second in order to check audio.currentTime and compare to an previous value. Then when the result is true, I reset the audio source to the same stream. It's kind of a hack but it seems to solve the trick.
html code:
<audio id="audio" controls>
<source src="http://127.0.0.1:3333/stream1" type="audio/mp3">
</audio>
javascript code:
var audio = document.getElementById('audio');
var myVar = setInterval(myTimer, 1000);
var oldTime = "";
function myTimer() {
if ((audio.paused != true && (audio.currentTime - oldTime) == 0 )) {
audio.src="";
audio.src="http://127.0.0.1:3333/stream1";
audio.play();
}
oldTime = audio.currentTime;
};

How to stop audio to play when user plays next audio?

I have a couple of music players in my website, all from a same plugin as
<audio id="player2" src="//filename" type="audio/mp3" controls="controls"></audio>
I want the previous audio player to stop when the user plays audio from another player.
I am a beginner so wish to have an easy explanation.

You need to listen to the play event and run pause on other players.
var audios = document.getElementsByTagName('audio'); // We get a list of all audio elements
audios.forEach(function(player) {
player.addEventListener('play', function() { // We listen for the `play` event on each player
audios.forEach(function(player2) {
if (player !== player2) { // we find other players which don't match the one that started
player2.pause(); // we pause those other players
}
});
});
});

how to play sound if condition came true javascript

I have a program to calculate the mean of a numbered array , and i allow the user to enter his answer , i want to play (success sound) if the user answer equals the real answer , and play (error sound) if not.
function calcMean(){
...}
function solution(){
...
if(useranser==realanswer){
//play success sound by calling soundPlay()}
if(useranswer!==realanswer){
//play error sound by calling soundPlay()}
function soundPlay(){
//somthing
}
I design the program in HTML not HTML5. I would like know how to load the audio file(the success sound) and then how i can trigger it to start playing once a user provides a correct answer.

Keep a hidden audio player in your html page
<audio controls id="player" style="display: none">
<source id="player-src" src="#"></source>
</audio>
load the src dynamically and play it
function solution(){
if(useranser==realanswer){
soundPlay("success sound src");
}
if(useranswer!==realanswer){
soundPlay("error sound src");
}
}
function soundPlay(src){
var audioElement = document.getElementById('player-src');
audioElement.src =src ; //src for the player
var myAudio = document.getElementById("player");
myAudio.load();
myAudio.play();
}