效果
![图片[1]-为网页添加一个弹窗提示音乐播放-乡野博文](http://www.zau.cn/wp-content/uploads/2022/05/a8b92ce7e9f4f356b0f12ad856e019b8.jpg)
前言
我们制作网站或者HTML单页的时候,没有播放音乐又觉得有些单调,自动播放音乐对于一些不喜欢的用户又觉得太吵,所以我们在网站或者HTML单页面上如果编写出一个弹窗提示用户是否开启音乐,那么喜欢边听歌边阅读网页内容的用户可以点击开启音乐,不喜欢的用户可以点击关闭音乐,这样可以很好的兼顾用户们的喜好。那么如何实现呢?话不多说下面就分享教程给大家!
使用教程
1、首先我们需要创建和调用2个主要的js文件。
若你的网站已经调用jquery,那么不需要添加下面的代码,若没有请添加下面的代码即可。
<script src="https://cdn.staticfile.org/jquery/1.11.0/jquery.min.js"></script>
在目录下创建一个js文件把下面的音乐播放的主要js代码添加进去,然后调用这个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文件,然后调用):
您阅读这篇文章共花了: 0小时00分00秒
THE END
暂无评论内容