效果

前言

我们制作网站或者HTML单页的时候，没有播放音乐又觉得有些单调，自动播放音乐对于一些不喜欢的用户又觉得太吵，所以我们在网站或者HTML单页面上如果编写出一个弹窗提示用户是否开启音乐，那么喜欢边听歌边阅读网页内容的用户可以点击开启音乐，不喜欢的用户可以点击关闭音乐，这样可以很好的兼顾用户们的喜好。那么如何实现呢？话不多说下面就分享教程给大家！

使用教程

1、首先我们需要创建和调用2个主要的js文件。

若你的网站已经调用jquery，那么不需要添加下面的代码，若没有请添加下面的代码即可。

<script src="https://cdn.staticfile.org/jquery/1.11.0/jquery.min.js"></script>

在目录下创建一个js文件把下面的音乐播放的主要js代码添加进去，然后调用这个js文件即可。

（yinle.js文件在文章底部下载）

2、在网页的“</head>”之前添加下面的代码：

<audio src="单曲音乐路径" id="audio"></audio>

注：自己可以把自己喜欢的一首音乐上传到主机的某个目录下，然后添加音乐路径（例如：/Music/xxx.mp3,若无法播放，请把音乐名改为英文名）。

3、（本步骤也可以不添加）可以在网页的合适位置添加一个音乐开关按钮，代码如下：

<button id="music">音乐开关</button>

音乐设置按钮CSS：

button,input{padding: 0.625rem;border-radius: 8px;border: 0;cursor: pointer;background-color: black;color: white;font-weight: 700;margin: 0.625rem;}

4、在网页合适的地方添加弹窗提示是否开启音乐javascript代码（当然也可以创建js文件，然后调用）：

-----本页内容已结束，喜欢请分享！-----