自定义音乐播放器

最新推荐文章于 2021-07-13 13:57:09 发布

angou1937

最新推荐文章于 2021-07-13 13:57:09 发布

阅读量125

点赞数

原文链接：http://www.cnblogs.com/pengBoRan/p/9546120.html

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
    </head>
    <body>
        
<div> 
 <h4 id="name"></h4>
 <br>
<audio id="audio" src="秋裤大叔 - 一晃就老了 (DJ何鹏版).mp3 " controls autoplay="true"></audio><br/>
</div>
<br><br>
<div>
<button id="btn-play" >播放</button>  
<button id="btn-stop" >暂停</button>  
<button id="btn-pre" >上一首</button>  
<button id="btn-next" >下一首</button>  
</div>

    </body>
    <script>
         <!--播放-->
    var btn1 = document.getElementById("btn-play");
        btn1.onclick = function(){
              if(audio.paused){                 
                audio.play();
            }
        }
    
    <!--暂停-->
    var btn2 = document.getElementById("btn-stop");
        btn2.onclick = function(){
              if(audio.played){                 
                audio.pause();
            }
        }
        
    var music = new Array();
    music = ["MC小洲 - 怀念青春","花姐 - 上海滩 (Live)","秋裤大叔 - 一晃就老了 (DJ何鹏版)"];//歌单
    var num = 0;
    var name = document.getElementById("name");
 
    
    <!--上一首-->
    var btn3 = document.getElementById("btn-pre");
    btn3.onclick = function(){
            num = (num +2)%3;
             audio.src = music[num]+".mp3";
            name.innerHTML == music[num];
            console.log(music[num])
            audio.play();
        }
        
    <!--下一首-->
    var btn4 = document.getElementById("btn-next");
    btn4.onclick = function(){
             num = (num +1)%3;
             audio.src = music[num]+".mp3";
            name.innerHTML == music[num];
            audio.play();
        }
    <!--自动播放下一首-->
    audio.addEventListener('ended', function () {  
    btn4.onclick();
}, false);

    </script>
</html>

转载于:https://www.cnblogs.com/pengBoRan/p/9546120.html

angou1937

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义音乐播放器

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> ...
复制链接

扫一扫