[经验总结]JS切换背景音乐的代码

最新推荐文章于 2023-12-07 19:33:20 发布

ThinkHY

最新推荐文章于 2023-12-07 19:33:20 发布

阅读量4.5k

点赞数

分类专栏：新技术 WEB技术开源软件文章标签：音乐 border function javascript table 网络

本文链接：https://blog.csdn.net/ThinkHY/article/details/5513543

版权

本文作者分享了在实际操作中遇到的JS切换背景音乐的问题，指出网络上常见方法的不足，并从一个韩国网站获得灵感，揭示了解决方案的关键在于添加适当的延迟。通过这种方法，可以确保音乐平稳切换。

摘要由CSDN通过智能技术生成

Author:	Thinkhy
Date:	2010.04.21.
Url:	http://www.disandu.com/?p=731
Keyword:	JS切换背景音乐 JS控制背景音乐 JAVASCRIPT

网络上介绍JS切换背景音乐的方法大多不可行，最后在一个韩国网站上找到解决办法，原来切换音乐时需要一个延时。

  musicStatus = false;

 

  // 背景音乐，播放特定曲目,空曲目，暂停音乐

  function playmusicfile(musicfile)

  {
     

      var objMusic = document.getElementById("bgm

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ThinkHY

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

javascript实现网页背景音乐自动播放

希望我的博客，能帮上你解决学习中工作中所遇到的问题

10-31

4959

javascript实现网页背景音乐自动播放

jQuery点击按钮网页背景切换代码.zip

07-05

这个示例中的代码基于jQuery 1.6.1，适用于初学者和有经验的开发者，帮助他们理解如何使用JavaScript库来增强网页的交互性。同时，也可以根据实际需求修改代码，例如添加过渡动画或支持更多背景图片。

参与评论您还未登录，请先登录后发表或查看评论

JavaScript如何实现按键音效、视频播放，标签分类切换横向滚动

最新发布

rr20060119的博客

12-07

1080

【代码】JavaScript如何实现按键音效、视频播放，标签切类切换手动横向滚动。

js实现音乐播放器

百创科技

06-23

1426

对鼠标进行监听，得到鼠标最后的落点，计算出进度条的起始位置与该点占据总长度的比例，然后简单的数学运算，我们知道歌曲总长度就很清楚的得到鼠标落点的歌曲该播放的位置。判断全局变量isplay，如果是true说明当前正在播放歌曲，点击就会暂停，反之就会播放。当然，不可能一次播放多个音乐，所以在播放当前音乐时将上一首音乐清除（封装方法见下）本文实例为大家分享了js实现音乐播放器的具体代码，供大家参考，具体内容如下。原理很简单，通过上面的时间变化求得百分比，设置为进度的百分比就OK了。5.将大小B装化为MB。

javascript实现在情人节网页上播放背景音乐

希望我的博客，能帮上你解决学习中工作中所遇到的问题

10-31

104

javascript实现在情人节网页上播放背景音乐

通过HTML与JS实现简单的音乐切换

qq_58174484的博客

01-22

3274

通过HTML与JS实现简单的音乐切换

js焦点图片自动轮播切换代码.zip

09-25

总结起来，"js焦点图片自动轮播切换代码.zip"是一个包含HTML、CSS和JavaScript的简单轮播组件，它利用jQuery库实现了图片的自动切换和用户交互。对于初学者来说，这是一个很好的学习实践案例；对于有经验的开发者，...

使用node.js半年来总结的 10 条经验

10-25

在使用Node.js进行开发的过程中，积累了宝贵的经验，以下是我半年来在实践中总结的10条关键要点： 1. **精确版本号管理**：在`package.json`文件中，应精确指定依赖包的版本，避免使用`*`、`^`或`~`符号。这些符号...

HTML5+CSS3背景变色日历表切换代码.zip

09-26

总结来说，这个压缩包提供的代码示例展示了HTML5、CSS3以及jQuery如何共同作用，创建出一个交互式的背景变色日历表。HTML5提供了网页的基础结构，CSS3负责视觉效果和动态过渡，而jQuery则简化了JavaScript代码，实现...

jQuery+CSS3响应式TAB选项卡幻灯片切换代码.zip

09-25

总结，"jQuery+CSS3响应式TAB选项卡幻灯片切换代码"是一个结合了前端两大技术的实用案例，它不仅展示了jQuery的灵活性和CSS3的创新性，还体现了响应式设计的重要性。无论是初学者还是有经验的开发者，都能从中学习到...

javascript的背景音乐

12-07

javascript的背景音乐。使用背景音乐可以让你的为网站更美丽。。

js控制网页背景音乐播放与停止的方法

12-12

本文实例讲述了js控制网页背景音乐播放与停止的方法。分享给大家供大家参考。具体实现方法如下：代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /> <ti

JavaScript实现音乐自动切换和轮播

10-19

主要为大家详细介绍了JavaScript实现音乐自动切换和轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

mid文件装换成乐谱的软件

03-23

能够将mid文件装换成乐谱的软件, 能够够快速转换，很方便

原生JS实现在线音乐播放器及歌词滚动

学习交流记录

06-22

2064

原生JS实现在线音乐播放器及歌词滚动

js给html设置背景音乐,最简单最快的方法给H5页面添加背景音乐播放（css样式美化）...

weixin_39900582的博客

06-03

2907

看了很多场景应用，右上角总是会有一个音频按钮，会播放音乐，现在通过简单几步就可以实现这个功能。1.先上基础的html，定位用了fixed(source 标签里面对应的音频链接换为自己的音频连接)2.添加css进行美化*{margin:0px;padding:0px;}body{background:#000;}/* music */@-webkit-keyframes reverseRotataZ...

js 背景音乐

大前端

11-09

1508

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js "></script> </head> <body>

html5 audio标签切换播放音乐的方法

weixin_42700593的博客

03-30

6709

总结先pause关闭然后更换路径然后play播放 $('.ceshiqiehuan').each(function () { $(this).on('touchstart', function () { $('#music1')[0].pause(); var luyinpath = $(this).attr('luyinpath'); ...

js表白代码含背景音乐

08-24

要实现一个含有背景音乐的JS表白代码，我们可以借助HTML5的audio标签来播放音乐。首先，我们需要一个按钮触发表白动作，这里我们可以使用一个简单的按钮元素。当按钮被点击时，我们将触发一个JavaScript函数，该函数将展示一个表白页面，并播放背景音乐。在HTML文件中，我们可以这样写： ```html <!DOCTYPE html> <html> <head> <title>JS表白代码</title> <style> #confession { display: none; text-align: center; font-size: 24px; padding-top: 200px; color: red; } </style> </head> <body> <button onclick="showConfession()">表白</button> <div id="confession"> <p>我喜欢你，你愿意和我在一起吗？</p> <audio src="background_music.mp3" autoplay loop></audio> </div> <script> function showConfession() { document.getElementById("confession").style.display = "block"; } </script> </body> </html> ``` 在上面的代码中，我们使用了一个CSS样式来隐藏了id为"confession"的div元素，该元素包含了一个表白的信息，同时通过`display: none;`来隐藏。当按钮被点击时，`showConfession()`函数被触发，该函数将显示表白页面，通过`document.getElementById("confession").style.display = "block";`将id为"confession"的div元素显示出来。在表白页面中，我们使用了`<audio>`标签来嵌入背景音乐，通过设置`autoplay`和`loop`属性，音乐将自动播放并循环播放。你只需将背景音乐文件"background_music.mp3"替换为自己喜欢的音乐文件即可。希望以上的代码能够帮助你实现一个带有背景音乐的JS表白页面！