html调用js自动播放音乐,使用html js实现点击文本和播放音乐的功能

旧城等待， 2022-10-05 13:59 177阅读 0赞

![f86855c85f632dbcfcdfed0db632a141.png][]

音频标记在HTML5中使用. 2113DOM中的文本如下. 文本是“播放”. 当单击5261时js实现网页音乐播放器，播放音乐广播4102js实现网页音乐播放器，并且文本将变为“暂停”. 根据是否在1653年播放音乐，这两个文本将切换. 这里要注意的一件事是音频兼容性问题. 如果考虑到它的兼容性，您可以看一下这种体验: HTML5音频如何与各种浏览器兼容以实现自动播放

![ab6d7d5ff2f5ba48344900c5bf99287e.png][]

播放

![20170311145809\_956.png][20170311145809_956.png]

JS部分:

![96daf8701942cc5ca67438ab2c823f9e.png][]

$(document).ready(function() \{

var voice = document.getElementById(voice); //获取到audio元素

$(.but).click(function() \{ //点击文字事件

if (voice.paused) \{ //判断音乐是否在播放中，暂停状态

voice.play(); //音乐播放

$(.but).text(暂停); //切换文字

\} else \{ //播放状态

voice.pause(); //音乐停止

$(.but).text(播放); //切换文字

\});

![fbc60f533cfd652b82898220044e8ae8.png][]

![resize,m\_lfit,w\_600,h\_800,limit\_1][resize_m_lfit_w_600_h_800_limit_1]

本文来自电脑杂谈，转载请注明本文网址：

http://www.pc-fly.com/a/bofangqi/article-269850-1.html

[f86855c85f632dbcfcdfed0db632a141.png]: /images/20221005/697eee686f3046368fa1f5aef267d86c.png
[ab6d7d5ff2f5ba48344900c5bf99287e.png]: /images/20221005/8ef2f971cd174b698e18c12fa0ecbd8d.png
[20170311145809_956.png]: http://img.ctolib.com/uploadImg/20170311/20170311145809_956.png
[96daf8701942cc5ca67438ab2c823f9e.png]: /images/20221005/920f6d418aba4a718c7f396e3d86e167.png
[fbc60f533cfd652b82898220044e8ae8.png]: /images/20221005/5b3657c9f6b0442492072de3ed72a894.png
[resize_m_lfit_w_600_h_800_limit_1]: https://iknow-pic.cdn.bcebos.com/d50735fae6cd7b89b3a510022442a7d8330efc?x-bce-process=image/resize,m_lfit,w_600,h_800,limit_1