HTML 5 Audio Tag Multiple Files

HTML 5 Audio Tag Multiple Files

In javascript you can do it like this (this is just to get you started):

audio = new Audio("start url");

  audio.addEventListener('ended',function(){
        audio.src = "new url";
        audio.pause();
        audio.load();
        audio.play();
    });

if you want you can also use the same player(jquery):

var audio = $("#player");

How to play multiple audio files one by one in html 5?

I would do something like that:

var mySound = document.getElementById("mySound");
var mySound1 = document.getElementById("mySound1");
var mySound2 = document.getElementById("mySound2");
var mySound3 = document.getElementById("mySound3");

var mySoundArray = [mySound, mySound1, mySound2, mySound3];
var mySoundArrayPos = 0;

var myButton = document.getElementById("myButton");
myButton.addEventListener("click", function(event) {
    mySound.play();
    mySoundArrayPos = 0;
    startSoundTimer();
});

const startSoundTimer = () => {
    var mySoundTimer = setInterval(() => {
        if (mySoundArray[mySoundArrayPos].currentTime >= mySoundArray[mySoundArrayPos].duration) {
            if (mySoundArrayPos < mySoundArray.length -1) {
                mySoundArrayPos += 1;
                mySoundArray[mySoundArrayPos].play();
            } else {
                clearInterval(mySoundTimer);
            }
        }
    }, 10);
};

I don't know if the 10ms are a bit too fast, but I think, it's legit.

How can I add multiple sources to an HTML5 audio tag, programmatically?

Why add multiple files with JavaScript when you can just detect the types supported? I would suggest instead detecting the best type then just setting the src.

var source= document.createElement('source');
if (audio.canPlayType('audio/mpeg;')) {
    source.type= 'audio/mpeg';
    source.src= 'audio/song.mp3';
} else {
    source.type= 'audio/ogg';
    source.src= 'audio/song.ogg';
}
audio.appendChild(source);

Add as many checks as you have file types.

Multiple audio tags are played simultaneously on same HTML page in iPhone

I did the following to solve the problem of multiple audio notes playing. Now using the following code only one audio is played at one time. Also, if you pause one audio and play another one and then play the paused audio then it will play from the point it was paused.

Below this is the HTML code

<div class='audiowithduration' id='"+ notes.note_id +"'>
  <div id='"+ notes.note_id +"' class='detailrecording'>
   <img src='../images/playrecord.png' class='detailplay' onclick='playAudio(this);'/>
   <img src='../images/pauserecord.png' class='detailpause' onclick='pauseAudio(this);' hidden/>    
    <input class='seekbar' type='range' step='any' min='0' value='0' disabled />
  </div>
  <span class='timeduration'>" + timeDuration + "</span>
  <audio class='audioNote' id='"+ notes.note_id +"' src='"+ audioNotePath +"' type=audio/mpeg preload='metadata'>
  </audio>
</div>

Below is the javascript code

/*Function to play an audio note*/
function playAudio(parentElement)
{
var audioNoteId = parentElement.parentNode.id;
//Get the audio id and tag value to play
        var song = $('#'+audioNoteId).find('.audioNote')[0];

        //Pause any audio that is already playing
        if (curPlaying)
        {
            $("audio", "#" + curPlaying)[0].pause();
        }

        if (song.paused)
        {
            song.play();
            curPlaying = $('#'+audioNoteId).find('.audioNote')[0].id;
        }
        else
        {
            song.pause();
        }
}

/*Function to pause an audio note*/
function pauseAudio(parentElement)
{
var audioNoteId = parentElement.parentNode.id;
//Get the audio id and tag value to pause
    var song = $('#'+audioNoteId).find('.audioNote')[0];
    song.pause();
}

---

Related Topics