为网页添加一个弹窗提示音乐播放

为网页添加一个弹窗提示音乐播放

效果

图片[1]-为网页添加一个弹窗提示音乐播放-乡野博文

前言

我们制作网站或者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文件,然后调用):

温馨提示:本文最后更新于2022-05-25 16:27:02,某些文章具有时效性,若有错误或已失效,请在下方留言或联系乡野博文
您阅读这篇文章共花了: 0小时00分00秒
-----本页内容已结束,喜欢请分享!-----
为网页添加一个弹窗提示音乐播放-乡野博文
为网页添加一个弹窗提示音乐播放
此内容为免费资源,请登录后查看
0积分
免费资源
© 版权声明
THE END
喜欢本站内容,请点【点赞】【分享】和【收藏】~
点赞11 分享
评论 抢沙发

请登录后发表评论