用JavaScript实现简易的网页音乐播放器

DecadeXCosmos

于 2020-03-22 20:41:21 发布

阅读量5.6k

点赞数 6

CC 4.0 BY-SA版权

分类专栏：苦逼前端入门文章标签： javascript html

本文链接：https://blog.youkuaiyun.com/DecadeXCosmos/article/details/105034825

本文介绍了如何使用JavaScript和HTML创建一个简单的网页音乐播放器，解决了Safari浏览器不自动播放音乐的问题。通过结合按键控制播放和暂停，以及实现音乐的自动连播，确保在不同浏览器上的兼容性。此外，还提供了实现播放器的JavaScript和HTML代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用JavaScript实现简易的网页音乐播放器

最近疫情在家，利用这段时间开始自学HTML等内容，目前在写自己的个人主页，想用音乐来给自己的主页增添点特色。
一开始单纯用audio标签添加音乐，带上autoplay和loop属性，但在让朋友测试这个页面的时候遇到了问题：

这个问题意味着，Safari在没有用户操作的情况下不会自动播放所插入的音乐，也就是说autoplay是没有用的，但是audio自带的control又不是很美观，左上角放个控制的模块也不太和谐。

为了解决所有浏览器都能正常播放，那我直接做一个简单的音乐播放器就好了。

我在网上也搜索过很多方法，但很多方法对初入门者指引不太明显，而且我也有一点点自己的审美要求，所以在这里给大家分享我的最后综合网上的办法得出来的一个简单的音乐播放器，话不多说，先上代码：

JavaScript代码：

function playPause() {
   
   
    var music = document.getElementById('music');
    var music_btn = document.getElementById('music-btn');
    if (music.paused){