如何使用<audio>播放一个又一个音轨标签在HTML5中使用JS/jQuery

How to play one track after other with <audio> tag in HTML5 using JS/jQuery?

本文关键字：HTML5 JS jQuery 音轨 audio 何使用 播放 一个又一个 标签      更新时间：2023-09-26

为了克服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(); 
            }

尝试使用触发器函数代替

fadeInAudio : function(audio){
//      audio.play();
    audio.trigger("play");
},
fadeOutAudio : function(audio){
//      audio.pause();
    audio.trigger("pause");
},
相关文章：