如何使用 JS/jQuery 在 HTML5 中使用 <audio> 标签播放一首曲目？答案

【问题标题】：How to play one track after other with <audio> tag in HTML5 using JS/jQuery?如何使用 JS/jQuery 在 HTML5 中使用 <audio> 标签播放一首曲目？
【发布时间】：2011-12-16 10:37:10
【问题描述】：

为了克服 Google TTS API 的 100 个字符的字符限制，尝试每 100 个字符循环一次以从 api 获取新的 mp3 并无缝播放。尝试了多种方法，但是 .play() 和像 canplay/onended 这样的事件监听器似乎不仅仅在循环中工作！最好的办法是让所有下载的曲目同时播放，而不是一个接一个。下面是一些代码：-

if ($("#theinput").attr("value").length > 100){
var len = $("#theinput").attr("value").length;
alert(len);
var audioPlayer = document.getElementById("spokenmemory");    
for (var i=0; i < (len / 100); i++) {
var stl=i*100;
var str = $("#theinput").attr("value").substr(stl, 100);
$("#spokenmemory").attr("src", "http://translate.google.com/translate_tts? tl=en&q="+str);
alert(str);
audioPlayer.load();  
audioPlayer.addEventListener('canplay', function () {
              alert('Loaded');
              audioPlayer.play();
            } );
//audioPlayer.play(); 

            }

任何帮助将不胜感激。

【问题讨论】：

标签： javascript html audio playlist

【解决方案1】：

尝试改用触发功能

fadeInAudio : function(audio){
//      audio.play();
    audio.trigger("play");
},

fadeOutAudio : function(audio){
//      audio.pause();
    audio.trigger("pause");
},

【讨论】：