给博客加个背景音乐~~

JavaScript Html
Uiaoin 2019-04-30 3535

首先给大家推荐下这首歌，张家辉《线人》片尾插曲 —— 董妮的《每当变幻时》，特有感觉（电影也挺好看），哈哈哈，抛个链接

https://music.163.com/song?id=84176&userid=481599787

接下来步入正题，其实给网站加个音乐很简单的事情，一个audio标签就搞定了，为啥还要发个博客呢，主要因为：

1、网站文章列表是异步加载的，包含图片，加上带宽限制，若是直接上HTML audio，实测后，发现好几秒才能把歌曲加载完，文章列表偶尔加载超时，肯定不行的嘛！
2、为了提升访问友好度，总得放个播放按钮啥的吧

多不解释，直接上代码

HTML

  1. <li><a class="music-control"><span class="fa fa-music"></span></a></li>
  2. <audio src="" style="display: none;" controls loop="loop" id="back-music"></audio>

此处去掉了一些无关的class，这里将audio的src属性设置为空，就是为了不影响其他内容加载，点击播放的时候再赋值就OK啦


JS

  1. var music = $("#back-music")[0]
  2. var musicStatus = $(".music-control span")
  3. $(".music-control").click(function () {
  4.     var that = $(this)
  5.     if (music.readyState != 4){
  6.         musicStatus.removeClass('fa-music')
  7.         musicStatus.addClass('fa-spinner fa-spin')
  8.             
  9.         //就一首，直接写了，大家换成自己的即可
  10.         music.src = "static/music/薰妮 - 每当变幻时.mp3"
  11.         music.load()    //audio重新加载
  12.         return
  13.     }else {
  14.         //加载完毕为前提，切换暂停/播放
  15.         if (music.paused){
  16.             music.play()
  17.             musicStatus.addClass('fa-spin')
  18.         }else {
  19.             music.pause()
  20.             musicStatus.removeClass('fa-spin')
  21.         }
  22.     }
  23. })
  25. //事件监听一直失败，没反应，最后选了定时器
  26. var timer = setInterval(function () {
  27.     //音频文件加载完毕
  28.     if (music.readyState == 4){
  29.         music.play()
  30.         musicStatus.addClass('fa-music')
  31.         musicStatus.removeClass('fa-spinner')
  32.         clearInterval(timer)
  33.     }
  34. },1000)


很简单（我都觉得没有写博客的必要了。。。[允悲]），大家直接点击导航栏music按钮预览就行！

加载更多