前言：
今天同学们对“html做一个简易音乐播放器怎么做”大致比较注意，同学们都需要了解一些“html做一个简易音乐播放器怎么做”的相关知识。那么小编也在网络上网罗了一些关于“html做一个简易音乐播放器怎么做””的相关资讯，希望你们能喜欢，姐妹们一起来学习一下吧！在H5之下做一个音频播放器，其实不难了，只用audio标签就可以了。本章，只是加了两个按钮，通过自己添加的按钮来控制音频播放，这才是本文目的。
一、HTML确实给了我们很多好东西，包括audio标签。
打开浏览器，什么也没有。
二、我们改改，src属性就不要了，加个controls，它是控制的意思，可以显示音频控制。
三、点了，可是没有歌呀，加歌进去吧，随便下载一首歌。
四、你会发现播放和暂停可以点击，还有进度条的拖动，都是可以用的，可如果你不喜欢那个按钮，又怎么自己做按钮来控制呢。
按钮真的很丑，我们得改改样式。
五、改成两个圆形按钮。
六、补点东西吧，audio标签也应该有个id，然后再加两个按钮的点击事件。
七、完成最后一步，让按钮可以控制audio。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> button{ width: 40px; /* 宽 */ height: 40px; /* 高 */ background: #3c88dd; /* 背景色 */ border:none; /* 去掉边框 */ color: white; /* 字的颜色 */ border-radius: 50%; /* 50%的圆角 */ cursor: pointer; /* 鼠标悬在上时为手形 */ transition: 0.5s; /* 变化过渡，配合hover用 */ } button:hover{ /* 鼠标悬在上时背景变色 */ background: #750f0f; } </style></head><body> <audio controls id="mymp3"> <source src="yq.mp3" type="audio/mpeg"> <!-- 这里可以放很多首，为了省事，我只放了一首歌 --> </audio> <button id="btplay">播放</button> <button id="btpause">暂停</button> <script> var ebtplay = document.querySelector("#btplay"); var ebtpause = document.querySelector("#btpause"); var emymp3 = document.querySelector("#mymp3"); ebtplay.onclick = function () { emymp3.play(); }; ebtpause.onclick = function () { emymp3.pause(); } </script></body></html> 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #html做一个简易音乐播放器怎么做
