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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了