多语言展示
当前在线:341今日阅读:197今日分享:19

网页跳转背景音乐不间断播放

随着网站的多元素发展,一个网站给人们体验是至关重要的。我们可能经常浏览网站的时候会经历过,一个首页是有背景音乐自动播放的,但是我们点击到内容页面的时候会发现,背景音乐就会从0:00的进度重新开始播放,这就会让人觉得反感,但只要我们可使网页跳转时背景音乐可以持续不间断播放,这样的效果就不一样了。那站长们应该怎么实现呢?思路:(1)我们可以使用框架(Frame)来解决;但懂点SEO优化的站长都知道,采取框架这种方法对搜索引擎是非常的不友好,不利于被收录;(2)我们可以使用js+html5,再调用几个api与浏览器的内核+cookie方法来解决;一来可以不使用框架的情况下网页跳转背景音乐维持原来的进度连续不间断播放;二来不影响搜索引擎的友好。(3)由于考虑到浏览器内存的调用机制,我们在使用音乐文件命名的方法最好是1.mp3,如果有多首背景音乐可以命名如:2.mp3....以此类推;(4)由于网站都在服务器内,至于音频文件的存放路径,可以为相对路径与路径调用,最简单的方法可以直接调用域名,然后在域名后面加上路径就可以了
工具/原料

Sublime,Webstorm,DW等等都可以

方法/步骤
1

我们为了简单测试效果,我们可以简单建立两个相对应网页做好超链接,我们把一个网页命名为/new/test.html,第二个网页命名为index.html;代码如下:网页跳转背景音乐不间断测试页面一点击进入测试二网页

2

第二个网页代码如下:网页跳转背景音乐不间断测试页面二点击进入测试一网页

3

这时候有人会说,如果有多首背景音乐的话,能不能有按钮控制,有不影响音乐的不间断播放呢?答案是可以肯定的。由于原始按钮不太美观,我可以在网上找一些适合做按钮的图片或者使用photoshop制作一些素材引用即可。这时候我们考虑到按钮是否会影响页面内容的问题,我们可以使用一下样式来让按钮竖直向下的悬浮在浏览器的左侧;按钮样式代码如下:

4

核心js代码如下:

5

小编在这里需要说明几点代码中会出现这几句代码:  //下一首歌曲切换        bgm_btn_next.onclick = function(){            var bgm_gds = bgm.getAttribute('value');            if(bgm_gds < 3)注:音乐播放完会自动播放一下曲,其中if判断语句里面的3代表你的服务器里面背景音乐的数量总数,如果只有一首背景音乐就直接改为1即可,依次类推。

6

由于考虑到浏览器内存的调用机制,我们在使用音乐文件命名的方法最好是1.mp3,如果有多首背景音乐可以命名如:2.mp3....以此类推;背景音乐可以直接调用域名,然后在域名后面加上音频的路径与文件名就可以了。

7

关于部署的问题,可以将上面所提及到的css样式与js,保存为一个外部的文件,然后在网站的所有网页内部调用即可,然后在域名后面加上外部调用的css与js文件路径与其文件名。

注意事项

测试以上网页跳转背景音乐不间断的效果请在服务器的环境部署,本地可以使用phpstudy进行部署测试;

推荐信息