【前端标签-audio】网页播放一个音频和多个音频

我会带着你远行 2022-11-05 08:56 260阅读 0赞

标签的属性

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>autoplay</td> 
   <td>autoplay</td> 
   <td>如果出现该属性，则音频在就绪后马上播放。</td> 
  </tr> 
  <tr> 
   <td>controls</td> 
   <td>controls</td> 
   <td>如果出现该属性，则向用户显示控件，比如播放按钮。</td> 
  </tr> 
  <tr> 
   <td>loop</td> 
   <td>loop</td> 
   <td>如果出现该属性，则每当音频结束时重新开始播放。</td> 
  </tr> 
  <tr> 
   <td>preload</td> 
   <td>preload</td> 
   <td>如果出现该属性，则音频在页面加载时进行加载，并预备播放.如果使用 “autoplay”，则忽略该属性。</td> 
  </tr> 
  <tr> 
   <td>src</td> 
   <td>url</td> 
   <td>要播放的音频的 URL。</td> 
  </tr> 
 </tbody> 
</table>

1.播放一个音频  
在idea中建一个文件夹存放本地.MP3文件  
![在这里插入图片描述][20210305215153357.png]  
body中输入:

运行在浏览器显示,即可播放  
![在这里插入图片描述][20210305215928217.png]  
2.播放多个音频  
第1在网页中只能播放一个音频,若想播放按顺序播放多个音频:

<div id="audioBox">
        <script type="text/javascript">
            window.onload = function(){
         
                var arr = ["http://96.ierge.cn/12/181/363120.mp3","http://96.ierge.cn/12/185/370503.mp3"];//为网络歌曲链接,也可自行填写 
                var myAudio = new Audio();
                myAudio.preload = true;
                myAudio.controls = true;
                myAudio.src = arr.pop()
                myAudio.addEventListener('ended', playEndedHandler, false);
                myAudio.play();
                document.getElementById("audioBox").appendChild(myAudio);
                myAudio.loop = false
                function playEndedHandler(){
         
                    myAudio.src = arr.pop();
                    myAudio.play();
                    console.log(arr.length);
                    !arr.length && myAudio.removeEventListener('ended',playEndedHandler,false)
                }
            }
        </script>
    </div>

播放玩一首歌曲后自动播放下一首,到放完为止  
![在这里插入图片描述][20210306085749948.png]

![在这里插入图片描述][20210306085721311.png]

[20210305215153357.png]: /images/20221023/512f6843140347e3b8f2eff31c54368a.png
[20210305215928217.png]: /images/20221023/93c3cce92eea40039835554da27e7a6f.png
[20210306085749948.png]: /images/20221023/effb5708fe1e48b4aed1efe911f1d16b.png
[20210306085721311.png]: /images/20221023/d3c09eeee5454e90b9d6ca7ea06ecf09.png