本站消息

站长简介/公众号


站长简介:高级软件工程师,曾在阿里云,每日优鲜从事全栈开发工作,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

即使我已经结束功能,按顺序播放音频数组也不起作用

发布于2021-10-26 22:15     阅读(1040)     评论(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/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

16 0
收藏该文
已收藏

评论内容:(最多支持255个字符)