JavaScript實現簡單的音樂播放器

2022-08-14 18:04:31
本文範例為大家分享了JavaScript實現簡單音樂播放器的具體程式碼，供大家參考，具體內容如下
主要功能：快進、快退、暫停、上下一首、禁音、滑鼠控制音量、自動下一首、顯示歌名
<html>
<head>
    @*不提供音訊*@
    <meta name="viewport" content="width=device-width" />
    <title>ceshi14</title>
</head>
<body>
    <div id="name">
    </div>
    <div> 
        <audio id="yinp"   controls="controls"autoplay="autoplay" >
            <source id="ss" src="~/images/Beautiful%20In%20White.mp3" type="audio/mpeg" />
        </audio>
    </div>
    <script>
        //在谷歌瀏覽器輸入  chrome://flags/#autoplay-policy 
        // 第一個選項 Autoplay policy  設定為 no user gesture is required  ：谷歌瀏覽器要調 才可以自動播放
        var i = 0;
        var shu = ['/images/Beautiful In White.mp3', '/images/%e6%b1%aa%e8%8b%8f%e6%b3%b7%20-%20%e5%b9%b4%e8%bd%ae.mp3','/images/%e9%99%88%e6%9f%8f%e5%ae%87%20-%20%e4%bd%a0%e7%9e%92%e6%88%91%e7%9e%92.mp3','/images/%e8%83%a1%e6%ad%8c%20-%20%e5%bf%98%e8%ae%b0%e6%97%b6%e9%97%b4.mp3','/images/%e5%8d%97%e5%be%81%e5%8c%97%e6%88%98%20-%20%e6%88%91%e7%9a%84%e5%a4%a9%e7%a9%ba.mp3','/images/%e5%91%a8%e6%9d%b0%e4%bc%a6%20-%20%e5%91%8a%e7%99%bd%e6%b0%94%e7%90%83.mp3','/images/%e8%83%a1%e5%a4%8f%20-%20%e5%90%8c%e6%a1%8c%e7%9a%84%e4%bd%a0.mp3'];//音訊路徑(轉碼)

        //控制播放 currentTime
        window.onkeydown = function (event) {
            var yinp = document.getElementById('yinp');
            if (event.keyCode == 32) {//空格控制播放
                if (yinp.paused) {//判斷音訊是否暫停
                    yinp.play();
                } else {
                    yinp.pause();
                }
            }
            if (event.keyCode == 13) {//回車控制是否禁音
                if (yinp.muted) {
                    yinp.muted = false;
                } else {
                    yinp.muted = true;
                }
            }

            if (event.keyCode == 27) {//Esc鍵關閉
                window.close();
            }

            if (event.keyCode == 39) {//右方向鍵快進
                yinp.pause();
                if (yinp.currentTime < yinp.duration-5) {//duration:音訊總長度   currentTime：音訊當前進度（當前長度）
                    yinp.currentTime += 1
                }             
            }

            if (event.keyCode == 37) {//左方向鍵快退
                yinp.pause();
                if (yinp.currentTime>1) {
                    yinp.currentTime -= 1
                }               
            }

            if (event.keyCode == 38) {//上方向鍵：上一曲（第一曲沒作用）
                yinp.pause();
                if (i>0) {
                    i--;
                } else {
                    i = 0;
                }
                yinp.load();
                document.getElementById('ss').src = '' + shu[i] + '';
            }           
        
            if (event.keyCode == 40) {//下方向鍵：下一曲
                yinp.pause();
                if ((i + 1) == shu.length) {
                    i = 0;
                } else {
                    i++;
                }
                yinp.load();
                document.getElementById('ss').src = '' + shu[i] + '';
            }
        };
        //按鍵鬆開時播放
        window.onkeyup = function (event) {
            var yinp = document.getElementById('yinp');
            if (event.keyCode == 39) {
                yinp.play();
            }
            if (event.keyCode == 37) {
                yinp.play();
            }
            if (event.keyCode == 38) {
                yinp.play();
            }
            if (event.keyCode == 40) {
                yinp.play();
            }
        }

       //滑鼠滾輪改變音量大小
        window.onwheel = function (event) {
            var yinp = document.getElementById('yinp');
            var pan = 0;
            if (event.wheelDelta) {            
                 pan = ((event.wheelDelta / 150) * 0.01).toFixed(2);              
            }
            if (event.detail) {
                pan = ((-event.detail / 3 ) * 0.01).toFixed(2);
            }
            var volume = Number((yinp.volume).toFixed(2));
            if (volume + Number(pan) > 1 || volume + Number(pan) < 0) {

            } else {
                yinp.volume = volume + Number(pan);
            }
        }
        
        function gename() {//歌名
            var name = document.getElementById('name');
            var s = decodeURI(shu[i])//解碼
            var pp = /([^\/]+).([^\/]+)/i;//正則匹配歌名
            pp.test(s);
            name.innerHTML = RegExp.$1;
        }
      
        var yinp = document.getElementById('yinp');
        yinp.onplay = gename;//播放時顯示歌名
        yinp.onended = function () {//結束時自動下一曲
            if ((i+1)==shu.length) {
                i = 0;
            } else {
                i++;
            }
            yinp.load();//重新載入
            document.getElementById('ss').src = '' + shu[i] + '';//更換音訊路徑
        }
    </script>
</body>
</html>
效果圖：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。
JavaScript實現簡單的音樂播放器

熱門文章
