发布于2021-10-26 22:15 阅读(1552) 评论(0) 点赞(16) 收藏(5)
我正在尝试按每个音频之间的持续时间按顺序播放我的所有音频文件。现在,我可以播放第一个音频,但我必须再次单击播放按钮才能播放第二个音频。结束函数应该处理这个,不是吗?感谢您的善意和帮助。
var playList = [{
"duration": 1000,
"value": "0_silence"
}, {
"duration": 4000,
"value": "1_hello"
}, {
"duration": 6000,
"value": "2_how_old"
}];
$(document).ready(function() {
var audioElement = document.createElement('audio');
var i = 0;
$("#play").on("click", function(){
audioElement.addEventListener("ended", playAudio(playList));
function playAudio() {
if(i < playList.length) {
audioElement.setAttribute('src', 'sound/' + playList[i].value + '.wav');
setTimeout(function (){audioElement.play(); playAudio, playList[i].duration;});
i++;
} else {
i = 0;
}
}
});
// playAudio(playList);
// });
//
// function playAudio() {
// var audioElement = document.createElement('audio');
// audioElement.addEventListener("ended", playAudio(playList));
// if (i < playList.length) {
//
// var audioElement = document.createElement('audio');
// audioElement.addEventListener("ended", playAudio(playList));
// audioElement.setAttribute('src', 'sound/' + playList[i].value + '.wav');
// audioElement.play();
// setTimeout(playAudio, playList[i].duration);
// i++;
// } else {
// i = 0; // reset i to zero to start over if button clicked again
// }
// }
}
第一个错误在这一行:
audioElement.addEventListener("ended", playAudio(playList));
此处playAudio()
调用函数并将其结果(undefined
在本例中)传递给addEventListener()
as 参数,这当然不起作用。如果playList
是全局的,只需将其更改为:
audioElement.addEventListener("ended", playAudio); // function is now referenced
此外,每次单击播放按钮时都会调用处理程序。仅在创建元素时添加一次。
setTimeout()
调用中还有一个错误,如帖子中所示,因为它错过了时间参数并且在功能块中包含无效语句。
但是,没有必要使用此调用,因为play()
在较新的浏览器中,调用元素会提示调用。对于较旧的浏览器,您可能需要使用该canplay
事件。setTimeout()
在这两种情况下都不推荐这里。
您还应该调用load()
beforeplay()
来重置和清理元素,并开始加载新源。
最后,如果打算在循环中播放列表,则在播放最后一首曲目时,列表将失败,因为i
在不调用播放的单独 else 块中重置。
您可能需要考虑播放按钮的行为,以防止它在播放时加载样本(即切换暂停/播放)。我playAudio()
在这里使用随机短样本完成了上述修复,除了播放按钮(我重新连接它以共享功能):
var playList = [{
"duration": 1000,
"value": "http://sampleswap.org/samples-ghost/SFX%20and%20UNUSUAL%20SOUNDS/ELECTRO%20and%20SYNTHETIC/257[kb]50s_space_telemetry.aif.mp3"
}, {
"duration": 4000,
"value": "http://sampleswap.org/samples-ghost/SFX%20and%20UNUSUAL%20SOUNDS/ELECTRO%20and%20SYNTHETIC/85[kb]analog_alarm_up.aif.mp3"
}, {
"duration": 6000,
"value": "http://sampleswap.org/samples-ghost/SFX%20and%20UNUSUAL%20SOUNDS/ELECTRO%20and%20SYNTHETIC/42[kb]alien_alarm.aif.mp3"
}];
$(document).ready(function() {
var audioElement = document.createElement('audio');
// reference function instead of calling it. Also, only set it once.
audioElement.addEventListener("ended", playAudio);
var i = 0;
$("#play").on("click", playAudio); // rewired to share playAudio()
function playAudio() {
var entry = playList[i++]; // get current entry, increment i
if (i >= playList.length) i = 0; // if i=> length, reset
audioElement.src = entry.value; // <- for demo samples only. 'sound/' + entry.value + '.wav';
audioElement.load(); // cleanup old fun, invoke loading of new
audioElement.play(); // cue up play
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id=play>Play</button>
作者:黑洞官方问答小能手
链接:http://www.qianduanheidong.com/blog/article/212839/8484913a0e1b414ee088/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!