心情杂记

个人站点设置背景音乐

作者：王小帅发布时间：2018-10-25 08:09:49 阅读（1807）

>昨天躺床上看抖音，突然来了一个灵感：何不在我们的情侣博客里面加一个背景音乐功能呢？于是，说干就干。

然后三下五除二就写完了，代码如下：
```
<embed src="/music/徐雯-你是风儿我是沙.mp3" autostart="true" loop="true" hidden="true" style="display:block;height: 0px;"></embed>
```
上面的代码只要放到base.html文件里面即可实现全站都能加载这段音乐，我使用的后台框架是thinkphp5。

功能虽然实现了，但是这段代码存在一个问题，就是每次页面切换的时候，音乐会被重新播放，这显然不行，体验太差了。

于是想到了第二种办法：使用iframe：音乐的embed标签单独给一个iframe，网站其他元素放到另一个iframe，因为各个iframe是相互独立的，这样，网站内容切换的时候，不会影响到音乐的那个iframe，具体代码如下：

主页：
```
<frameset rows="*,0" frameborder="NO" border="0" framespacing="0"/>
<frame src="{:url('index/ifra')}" name="mainFrame" scrolling="yes"/>
<frame src="{:url('index/music')}" name="bottomFrame" scrolling="NO" noresize>
```

音乐页：
```
<embed src="/music/徐雯-你是风儿我是沙.mp3" autostart="true" loop="true" hidden="true" style="display:block;height: 0px;"></embed>
```

网站页：
```
//这里放网站的html即可
```
这样，一刷新页面就可以正常播放音乐了，并且，点击页面切换的时候，音乐不会重新播放。

不过，这又出现了新的问题，首先网站刷新的时候，页面会闪的很厉害，另外对百度等搜索引擎的seo优化很不好，去查询资料，才发现iframe存在诸多问题，建议少用或者不用，遂放弃之，再想其他办法。

google搜索之下，又发现新的办法。

用js来实现，把歌曲的播放进度保存到客户端，然后当切换页面的时候首先查询客户端上的歌曲进度，如果有就继续播放，没有就正常播放，核心代码如下：
```
//html
<audio value="1" id="bgm" controls hidden></audio >

//javascript
window.onload = function(){
　　var bgm = document.getElementById('bgm');
　　//初始化播放列表【如果有播放记录，则调用】
　　if(localStorage.getItem('bgm_gds') != null){
　　　　bgm.setAttribute('value',localStorage.getItem('bgm_gds'));
　　　　bgm.innerHTML = '<source src="/music/' + localStorage.getItem('bgm_gds') + '.mp3" type="audio/mpeg">';
　　}else{
　　　　bgm.setAttribute('value',1);
　　　　bgm.innerHTML = '<source src="/music/徐雯-你是风儿我是沙.mp3"" type="audio/mpeg">';
　　}
　　//音轨补偿代码
  　　setTimeout(function(){
　　　　//获取DOM
　　　　var bgm = document.getElementById('bgm');
　　　　//如果发现有本地存储，则进行音轨补偿
　　　　if(localStorage.getItem('bgm_time') != null){
　　　　　　bgm.currentTime = localStorage.getItem('bgm_time');
　　　　　　//启动播放音乐
　　　　　　bgm.play();
　　　　}
　　　　//不断循环记录播放进度
　　　　window.setInterval(function(){
　　　　　　//检测是否支持本地存储
　　　　　　if(typeof(Storage) !== 'undefined'){
　　　　　　　　//写入BGM播放进度
　　　　　　　　localStorage.setItem('bgm_time',bgm.currentTime);
　　　　　　}else{
　　　　　　　　//提示浏览器不支持
　　　　　　　　var doc_body = document.querySelector('body');
　　　　　　　　doc_body.innerHTML = '<h1>抱歉！您的浏览器过旧，请更换新的浏览器再试</h1>';
　　　　　　}
　　　　},100);
　　　　//初始化启动BGM
　　　　bgm.play();
　　},1000);
    }
```

代码运行，虽然解决了之前的问题，不过，发现仍旧还是存在问题，比如页面切换的时候，音乐会接着之前的时间播放，但是，读取之前的播放记录的时候，会有一个加载时间，从而让人感觉中断了2秒钟左右，用户体验达不到iframe的效果，希望能够达到的是页面切换的时候，音乐能够很流畅的播放，丝毫不受影响。

**看来想要达到我的期望，只能使用ajax或者pjax做全站SPA了，目前没时间改版，下次再来考虑。**

【上一篇】: 折腾的蜜月：从签证开始

【下一篇】: 当你的才华撑不起你的梦想时.......

☺

评论
共 1 条评论

最新评论

懵逼网 meng.bi

2019-03-18 23:30:53

建议使用ajax，不然切换页面还是卡。

回复

2019-03-22 08:39:09

王小帅（管理员）回复 @懵逼网 meng.bi : 暂时没时间去弄这个咯。

回复

标签云

置顶推荐

最新文章