用js實現控制音樂播放其實很簡單，但是第一次去做可能會遇到一點點小問題。
比如說我自己，第一次想實現一個播放器效果，然后在網上搜尋半天照着自己的理解寫下如下代碼：
我自己感覺是沒有任何問題的，然而事情總是超乎我的意料之外，卻又在情理之中。可能是因為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>