js实现连续播放音频文件

代码如下


    <script type="text/javascript">
      
      let sounds = ["/data/1.wav","/data/2.wav","/data/3.wav"];
      let g_curidnex = 0;
      let g_audio = new Audio;
      $(function(){
          
      })
      
      function startpaly()
      {
          if (g_curidnex >= sounds.length)
            g_curidnex = 0;
          g_audio.pause();
          g_audio.src = sounds[g_curidnex];
          g_curidnex++;
          g_audio.play();
      }
      
      //监听事件方式1  这是重点
      // g_audio.addEventListener("ended",function()
      // {
         //  if (g_curidnex >= sounds.length)
         //      g_curidnex = 0;
         //  g_audio.src = sounds[g_curidnex];
         //  g_audio.play();
         //  g_curidnex++;
      // })
      //事件绑定利用qjuery
      $(g_audio).bind("ended",function(){
          if (g_curidnex >= sounds.length)
              g_curidnex = 0;
          g_audio.src = sounds[g_curidnex];
          g_audio.play();
          g_curidnex++;
      })
      
    </script>

 

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在HTML5中,可以使用audio标签来实现背景音乐的播放。为了实现多页面的连续播放,可以使用JavaScript来控制音乐的播放和暂停。 首先,在每个页面的HTML代码中添加一个audio标签来嵌入音乐文件: ``` <audio id="bgMusic" src="music.mp3" loop></audio> ``` 这里设置了id为bgMusic,src为音乐文件路径,loop表示循环播放。 然后,在每个页面的JavaScript代码中,添加以下代码: ``` var bgMusic = document.getElementById("bgMusic"); bgMusic.play(); ``` 这段代码将获取音乐标签,并播放音乐。 接下来,为了实现多页面的连续播放,需要在页面切换时,暂停当前页面的音乐,然后播放下一个页面的音乐。可以使用以下代码来实现: ``` window.addEventListener('beforeunload', function() { bgMusic.pause(); }); window.addEventListener('load', function() { bgMusic.play(); }); ``` 这里使用了beforeunload事件来在页面切换前暂停当前页面的音乐,load事件来在下一个页面加载后播放音乐。 最后,为了确保音乐能够在所有浏览器中正常播放,可以使用多种音频格式: ``` <audio id="bgMusic" loop> <source src="music.mp3" type="audio/mpeg"> <source src="music.ogg" type="audio/ogg"> <source src="music.wav" type="audio/wav"> </audio> ``` 这里使用了三种不同的音频格式:mp3、ogg和wav。浏览器会自动选择支持的格式进行播放。 通过以上步骤,就可以实现HTML5中多页面的背景音乐连续播放了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值