前端——如何切换html还能使背景音乐继续播放

最新推荐文章于 2024-07-10 15:25:37 发布
最新推荐文章于 2024-07-10 15:25:37 发布
阅读量4k 收藏 37
点赞数 4
分类专栏： # Web前端 文章标签： 前端 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42247720/article/details/127743934
版权

前言

现在有个需求，就是切换html还能使背景音乐继续播放，不会重新播放。
众所周知，html一旦切换，页面内容会重新加载，音乐也会重新加载播放，怎么才能做到音乐连续播放，而不是重新播放呢？

查资料发现前辈们提了个办法：用iframe来切换页面，这样在iframe本身的音乐就不会中断重新刷新了。
嗯！好办法！
iframe代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<iframe src="song.html" style="display: none"></iframe>
<iframe width="100%" align="center" height="200" id="win" name="win" onload="Javascript:SetWinHeight(this)" frameborder="0" scrolling="no" src="home.html"></iframe>
</body>
</html>

有一个问题，就是iframe这个页面，如何跟随它的子页面进行高度的自适应呢？给出如下代码：

 /**
  * 这个script脚本只针对iframe切换页面进行iframe高度的自适应
  * @param obj
  * @constructor
  */
 //iframe自适应高度
 function SetWinHeight(obj) {
     var win=obj;
     if (document.getElementById) {
         if (win && !window.opera) {
             if (win.contentDocument && win.contentDocument.body.offsetHeight)
                 win.height = win.contentDocument.body.offsetHeight;
             else if(win.Document && win.Document.body.scrollHeight)
                 win.height = win.Document.body.scrollHeight;
         }
     }
 }

但是同时又要解决一个问题，就是如果用iframe来加载页面，那在子页面进行跳转的时候，肯定是需要获取子页面的名字，再更换iframe父页面的src。
那么子页面怎么传递数据给iframe这个父页面呢？
iframe父页面

<script>
    //父页面监听：获取点击的a标签，来切换iframe的src，进行更换显示页面
    window.addEventListener("message", function(event){
        var data = event.data;
        console.log(data);
        document.getElementById("win").src = data.page;
        //此时data.page就是子页面里changePage函数里传来的page数值
    })
</script>

子页面：

function changePage(page) {
    window.parent.postMessage({
        page: page
    }, "*");
}

至此就结束啦，iframe完成了页面的切换，音乐也可以继续播放了。

狮子座的程序员
关注
专栏目录
html 不间断背音乐代码,请参考不用框架结构做出 “页面间跳转而不间断的背景音乐”每次进去还是随机播放...
weixin_30499067的博客
06-04 1433
同事问的如果不用Frame怎么让背景音乐不间断播放呢于是撒网在百度里搜···搜到了这个··真是高手呀··var Media = new ActiveXObject("MediaPlayer.MediaPlayer");Media.FileName="http://www.nbcai.org/jimmie/lucy/colorofwind.mp3";你打开网站以后，即使在各个页面间跳转，背景音乐不间...
html音乐自动播放暂停js,JS实现html页面切换背景音乐不间断网页跳转背景音乐不停止播放...
weixin_35075655的博客
05-30 3992
我们做项目的时候可能会用到需要在整个网站中添加背景音乐.但如果仅在页面中添加BGSOUND标签来播放音乐的话,当页面切换时,背景音乐就会重新加载,而达不到连贯播放的效果.为了解决这个问题,我们最常用的就是使用框架来设计网页,这样能很好的解决这个问题,但是美中不足的就是,搜索引擎对框架页面是不太友好的,也许这样做效果达到了,但可能会影响你网站的收录.我们还有个办法来完美解决这个问题,用JS来实现.首...
html frame背景音乐,利用 frameset 框架实现切换网页时不刷新背景音乐（不会中断）...
weixin_42389113的博客
06-03 1643
当我们在网页中插入音乐播放器或背景音乐时，往往会遇到这样一个问题：音乐只在插入的网页播放，当我们切换网页时音乐会戛然而止，这时我们就想到能不能在每个网页中都插入背景音乐，然而这样也不会产生我们想要的结果，因为音乐会在你每次切换网页时从头播放。要解决这个问题，唯一的办法就是将背景音乐单独的放在一个网页中，然后保证在切换网页时只改变网页内容，而不刷新背景音乐。在这里，我将音乐播放器放在了顶部高为45的...
html 背景音乐自动暂停,如何切换网页时背景音乐不停止播放_html/css_WEB-ITnose
weixin_39790102的博客
05-31 3098
如题，做了几个网页，首页加入背景音乐后，切换网页音乐就停止了，想从首页切换别的页面时候音乐不停止，除非关闭网页才停止的那种，有没有大神知道的回复讨论(解决方案)切换时把背景音乐播放暂停，把暂停的时间放在session里面，另一页开始时读取session的 内容，然后在重那个时间点播放。$('a.btnNext').one('touchend',function(e){sessionStorage....
如何实现前端音频和视频播放
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-10 1108
);});});});});});});});});});});});});});});});});});});});});});});});const});});});});'myVideo';});});const});});});
html frame背景音乐,如何切换网页时背景音乐不停止播放_html/css_WEB-ITnose
weixin_29128423的博客
06-03 1186
如题，做了几个网页，首页加入背景音乐后，切换网页音乐就停止了，想从首页切换别的页面时候音乐不停止，除非关闭网页才停止的那种，有没有大神知道的回复讨论(解决方案)切换时把背景音乐播放暂停，把暂停的时间放在session里面，另一页开始时读取session的 内容，然后在重那个时间点播放。$('a.btnNext').one('touchend',function(e){sessionStorage....
html:歌曲在新打开的页面中继续播放演示
christine_Ruan的专栏
06-10 1976
今天有一个同学问我如何用html实现新打开的页面继续播放上一个页面的歌曲，现在将演示代码写下来，希望可以帮到更多的朋友。   index.html(注：比较frameset,普通html文件头的dtd文件) 歌曲在新打开的页面中继续播放
html 音乐能连续播放吗,音乐在不同HTML页面的连续播放问题
weixin_30735701的博客
06-04 1633
原则上不同的页面，资源重新加载，音乐的播放会被重置。要实现音乐的连续播放，可以尝试使用如下的一些方法：1. 主页面使用frame,实际上是隐藏了music.html，只显示index.html，然后页面切换只是在index.html所在的那个frame发生，而主页面和music页面实际未重新加载。这样音乐可以连续播放，但缺点是没办法在index.html页面中控制音频播放。2. 使用Ajax动态加...
HTML5中多页面实现背景音乐的连续播放
热门推荐
ghjzzhg的博客
01-08 2万+
在单个页面中插入背景音乐，当跳转到其他页面时，背景音乐就没了，此时若在其他页面添加相同的audio控件，那么跳转后音乐会重新播放；因此想办法让他能够在跳转后能够继续播放此音乐： 新建一个music.html页面 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;titl...
背景音乐跳转不重复播放解决办法
12-15
音乐不重复播放,代码音乐跳转不重复，自己写的，测试兼容所有浏览器
Javaweb前端——HTML常用标签.pdf
04-09
HTML基础知识点总结 HTML（Hyper Text Markup Language）是标准...3. background：背景图片 4. align：对齐方式 HTML颜色表示方式： 1. 颜色名称：red、green、blue 2. RGB模式：#000000、#ffffff、#325687、#377405
任何网站都适用的防刷新防跳转背景音乐播放插件
06-25
任何网站都适用的防刷新防跳转背景音乐播放插件 自行开发的实用插件 自行按照说明书修改 无需数据库支持
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
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是针对初学者的一份详实的学习资料，这份笔记记录了跟随B站知名up主“遇见狂神说”的java系列视频中关于前端开发的基础内容。笔记内容不仅与视频...
前端——开源前端框架纵横谈.pdf
01-02
前端——开源前端框架纵横谈 前端开发的高速发展浪潮中，随着Web应用交互复杂度的提升，前端开发也迎来了高速发展的时期。开源前端框架纵横谈文中，对当前数量繁多的前端框架进行了分析和比较，旨在为大家在选择...
HTML期末作业——基于html实现娱乐音乐资讯发布平台HTML模板(22页面)
08-10
- **CSS样式设置**: CSS用于美化HTML文档，本项目中的CSS不仅用于调整字体大小、颜色和间距等基本属性，还用于创建更复杂的视觉效果，如背景图的应用，使网页更具吸引力。此外，通过设置不同的CSS规则，确保了网页在...
Web前端大作业——基于HTML+CSS+JavaScript仿英雄联盟LOL游戏网站
08-10
1. **响应式设计**：虽然项目已经具备了一定的响应式特性，但可以通过引入Bootstrap框架进一步优化响应式布局，使其在不同设备上都能提供优秀的用户体验。 2. **性能优化**：通过对图片等资源的压缩处理、减少HTTP...
跳转html时继续播放音乐,vue-router跳转页面后，子组件音乐播放器的当前播放时间会不停在两个值之前跳动？...
weixin_42516600的博客
06-04 833
点击查看demo github地址问题描述：在【音乐播放页】选中一首歌曲，歌曲能正常播放；当切换到【音乐详情页】之后，页面上的当前播放时间会不停的在两个值中间跳动？定时器timer已经在路由切换的时候关了，但是还会不停的执行timer这个方法切换路由后，当前播放的音乐播放器组件，时间一直在跳动？musicBar.vue<template><div><div style...
使用Javascript控制视频或音乐连续播放
澈
04-17 1657
　　需要做一个音乐播放的功能，设想，有一个浏览页面，在浏览页面上通过checkbox选定需要播放的音乐，传值给另外一个页面，进行音乐的连续播放。中间遇到很多问题，在网上看了ｎ多帖子，和我的情况都不怎么一样。　　传值页面很好做，只要遍历checkbox把选定的歌曲添加到一个字符串里面，然后用QueryString传递给播放页面就可以了，我传的是歌曲的文件名，用#分隔开，唯一需要注意的地方就是需要
vscode:Web前端——登录、注册界面
06-07
好的，我可以帮你提供一些思路。首先，登录和注册界面是Web前端的常见功能，可以使用HTML、CSS、JavaScript等技术来实现。以下是一些简单的步骤： 1.设计页面布局：可以参考一些常见的登录、注册页面的设计，例如输入框、按钮的布局和样式等。 2.编写HTML代码：根据设计的页面布局，编写HTML代码，将页面元素放到合适的位置。 3.使用CSS美化页面：通过CSS样式，可以实现页面的美化，例如颜色、字体、边框、背景等。 4.编写JavaScript代码：登录和注册功能需要与服务器进行交互，可以使用JavaScript编写相关代码，例如发送请求、验证输入等。 5.测试和调试：完成以上步骤后，可以进行测试和调试，确保功能正常。 总的来说，实现登录和注册界面需要一些前端技术的知识和经验，建议你参考一些相关的教程和示例，逐步学习和实践。
评论 15
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

狮子座的程序员

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值