js實現控制音樂播放

阿新 • • 發佈：2022-03-10

js實現控制音樂播放

用js實現控制音樂播放其實很簡單，但是第一次去做可能會遇到一點點小問題。

比如說我自己，第一次想實現一個播放器效果，然後在網上搜尋半天照著自己的理解寫下如下程式碼：

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width,initial-scale=1.0" />
         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
         <title></title>
         <script type="text/javascript">
             var mp3 = document.getElementById("music");
             function start() {
                 mp3.play();
             }
 
             function stop() {
                 mp3.pause();
             }
         </script>
     </head>
     <body>
         <video id="music" controls="controls" src="剛好遇見你.mp3">
 
         </video>
         <input type="button" id="" value="開始" onclick="start()" />
         <input type="button" id="" value="停止" onclick="stop()" />
     </body>
 </html>

我自己感覺是沒有任何問題的，然而事情總是超乎我的意料之外，卻又在情理之中。可能是因為js學的太淺了，對js的認知度太低，可以說幾乎不懂吧。

這時候Ctrl+S儲存，然後Ctrl+R開啟瀏覽器一執行，欸嘿，沒反應！然後又開啟控制檯，看到幾行紅色，說是什麼什麼是錯誤。如圖：

咱也看不懂，於是乎就複製到瀏覽器去搜一下。

搜到的結果也是五花八門，並沒有我需要的。

然後又自己思考一番。

先在方法外用console.log(mp3);輸出這個變數。

再次開啟瀏覽器按下F12顯示null，感覺應該也沒問題，畢竟是mp3音訊檔案。

然後又在方法內用console.log(mp3);輸出這個變數，結果在瀏覽器控制檯裡面什麼也沒有顯示，這時候就是問題所在了。

可能是變數範圍的問題吧！咱也不懂！

於是乎又開啟瀏覽器搜尋一番，似懂非懂，大致意思就是說：方法內獲取不到方法外的變數，方法內需要呼叫的變數最好就在方法內寫。

但是我印象裡好像又有全域性變數這種東西，害，咱也不懂！當個規律記下吧！

最後實現效果的程式碼如下：

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width,initial-scale=1.0" />
         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
         <title></title>
         <script type="text/javascript">
             function start() {
                 var mp3 = document.getElementById("music");
                 mp3.play();
                 console.log(mp3);//null
             }
             function stop() {
                 var mp3 = document.getElementById("music");
                 mp3.pause();
                 console.log(mp3);//null
             }
         </script>
     </head>
 
     <body>
         <video id="music" controls="controls" src="剛好遇見你.mp3">
 
         </video>
         <input type="button" id="" value="開始" onclick="start()" />
         <input type="button" id="" value="停止" onclick="stop()" />
     </body>
 </html>