javascript - How to play many audio files in sequence - Stack Overflow

admin管理员组

文章数量:1323735

I have several long stories which for which the source audio is sentence-by-sentence audio files. I would like to create a web page where one could listen to individual sentences of a particular story many times, or listen to the whole story from start to finish.

To start, my web page has many <audio> elements, each of which is in a <p> with the corresponding text. Each of these <audio> elements corresponds to a single sentence of the story.

I was about to start coding up a javascript object which was going to allow some sort of "play all" functionality, you'd click the button and it would play audio[0], when that finished, audio[1], etc. It would also have a 'pause' button and keep track of where you were, etc. This way the individual sentences could still be played or enjoyed because they each have an audio element. Or, one could use my "play all" buttons at the top to treat the sequence of audio elements as if they were one big element.

Then I started asking myself if there's some better/easier/more canonical solution here. One thing I thought of doing would be to cat all of these individual audio files together into a big audio file and perhaps create 'chapter' <track> elements. Is this preferable?

What are the pros and cons to each approach? Is there some out-of-the-box solution already made for me which I simply haven't turned up?

I have several long stories which for which the source audio is sentence-by-sentence audio files. I would like to create a web page where one could listen to individual sentences of a particular story many times, or listen to the whole story from start to finish.

To start, my web page has many <audio> elements, each of which is in a <p> with the corresponding text. Each of these <audio> elements corresponds to a single sentence of the story.

I was about to start coding up a javascript object which was going to allow some sort of "play all" functionality, you'd click the button and it would play audio[0], when that finished, audio[1], etc. It would also have a 'pause' button and keep track of where you were, etc. This way the individual sentences could still be played or enjoyed because they each have an audio element. Or, one could use my "play all" buttons at the top to treat the sequence of audio elements as if they were one big element.

Then I started asking myself if there's some better/easier/more canonical solution here. One thing I thought of doing would be to cat all of these individual audio files together into a big audio file and perhaps create 'chapter' <track> elements. Is this preferable?

What are the pros and cons to each approach? Is there some out-of-the-box solution already made for me which I simply haven't turned up?

• javascript
• html
• html5-audio

Share Improve this question Follow edited Jan 25, 2017 at 15:27 Jonathan Hall 79.8k1919 gold badges159159 silver badges203203 bronze badges asked Jul 25, 2016 at 6:09 JawguyChooserJawguyChooser 1,93611 gold badge1818 silver badges3535 bronze badges 2

• Your question is similar to this: stackoverflow./questions/18274061/… – Sayed Rafeeq Commented Jul 25, 2016 at 6:21
• Similar, but not the same. That question asks whether it's possible to control more than one audio element with javascript. I think it's clearly possible and I see how to do it (more or less). My question is whether this is a good idea. Or, perhaps more to the point, whether it's a better idea than catting my audio files together and creating some sort of chaptering system. Or, whether there's some third solution I'm missing here. – JawguyChooser Commented Jul 25, 2016 at 6:25

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

You could use the ended event to play the next sound when the previous sound pletes (Playing HTML 5 Audio sequentially via Javascript):

var sounds = new Array(new Audio("1.mp3"), new Audio("2.mp3"));
var i = -1;
playSnd();

function playSnd() {
    i++;
    if (i == sounds.length) return;
    sounds[i].addEventListener('ended', playSnd);
    sounds[i].play();
}

function playAudio(src) {
  var audioElement = new Audio(src);
  audioElement.play();
  return audioElement
}

const sequences = ['./audio/person.m4a', './audio/4.m4a', './audio/5.m4a', './audio/6.m4a', './audio/6.m4a', './audio/6.m4a', './audio/room.m4a', './audio/3.m4a']

// play audio
let index = 0
const audioElement = playAudio(sequences[index])
audioElement.addEventListener('ended', (e) => {
  index++
  if (index < sequences.length) {
    audioElement.src = sequences[index]
    audioElement.play();
  }
})

I use javascript to solve the problem, using Audio objects and a setInterval. Below an example:

  var sndLetItSnow = new Audio("audio/letItSnow.m4a");
  var sndSanta = new Audio("audio/snow.m4a");

  var playlist = [sndLetItSnow, sndSanta];

  var current = null;
  var idx = 0;

  function playSound() {
      if (current === null || current.ended) {
          // go to next
          current = playlist[idx++];

          // check if is the last of playlist and return to first
          if (idx >= playlist.length)
              idx = 0;

           // return to begin
           current.currentTime=0;

           // play
           current.play();
      }

  }

  setInterval(playSound, 1000);

For more documentation on Audio object you can visit this page:

https://developer.mozilla/en-US/docs/Web/API/HTMLMediaElement

I hope this help!

本文标签： javascriptHow to play many audio files in sequenceStack Overflow