js实现控制音乐播放
用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>
