javascript - 使用 jQuery 播放列表

Question

我有一个包含两首歌曲的播放列表，但每次播放时只播放第一首。我无法弄清楚问题所在。每当用户点击错误答案并播放两首歌曲时，我都会尝试创建一个测验。

我的代码:

$(stage).append('<div id="play"><audio id="bg_audio">
    <source src="../Voices/check_answer.ogg"></source>
    <source src="../Voices/good.ogg"></source></audio>
    </div>'); 
$('.pix').click(function() {
    if(questionLock==false) {
        if(this.id!=rnd) {
            $('#bg_audio').get(0).play();
        } else {
            questionLock=true;  
            setTimeout(function(){changeQuestion()},1000);
            $('.displayed', stage).addClass('hidden');
        }
    }})
}

Answer 1

你误解了 <source> 标签有效。它的目的是提供不同格式的相同音频文件，而不是创建要播放的音频文件列表。

如果您只想播放音频而不显示控件，可以使用 Audio constructor而不是创建 HTML 元素并将它们附加到页面。

// Take a list of files as arguments.
const playList = (...list) => {
  // Stop recursion when the list is empty.
  if (list.length === 0) return Promise.resolve()
  return new Promise((resolve, reject) => {
    // Create a new Audio element from the first item on the list.
    const audio = new Audio(list.shift())
    // Resolve the promise after the file ends playing.
    audio.addEventListener('ended', () => resolve(...list))
    // Reject the promise if the file fails to load.
    audio.addEventListener('error', () => reject('Resource failed to load.'))
    // Play the audio.
    audio.play()
  // Continue playing the rest of list recursively.
  }).then(playList)
}

// For simplicity, play the same file twice.
playList(
  'http://www.html5tutorial.info/media/vincent.mp3'
 ,'http://www.html5tutorial.info/media/vincent.mp3'
)