audio.js

看到一些炫酷网站或者博客时总会被站点的背景音乐所吸引,所以好奇心驱动着我前去折腾一番。经过各种搜索和折腾后,终于找到了一个javascript的类库audiojs, 依照文档一步一步尝试,终于我的播放器出炉了,哈哈!

安装


  <script type="text/javascript" src="/src/vender/audio.min.js"></script>
  

  <script>
  audiojs.events.ready(function() {
    var as = audiojs.createAll();
  });
  </script>
  

  <audio src="/mp3/juicy.mp3" preload="auto" />
  

至此,一个最简单的音乐播放器已经添加完成,上面最后一步中src=”/mp3/juicy.mp3”就是音乐文件的具体路径。当然,为了减少音乐文件过多引起的性能问题,我们可以指定相应的网络音频文件链接。推荐用网易,虾米或者其他的云音乐。

获取在线音乐链接(以网易云音乐为例)

  1. 访问官网

  2. 搜索你喜欢的音乐 search music
  3. 选择音乐,跳转到播放页面,从浏览器地址栏中可以获得目标音乐的对应id。 比如: https://music.163.com/#/song?id=472361096 中 id = 472361096

  4. 网易云音乐的音乐链接类似http://music.163.com/song/media/outer/url?id=168053.mp3, 这里只需要替换步骤3中的你找到的音乐id即可。

  5. 将最终的地址http://music.163.com/song/media/outer/url?id=472361096.mp3 指定给audio标签的src属性,如:

  <audio src="http://music.163.com/song/media/outer/url?id=472361096.mp3" preload="auto" />
  

参考链接 :http://aestheticallyloyal.com/public/audiojs/

  1. 寻寻觅觅 -- Christine Welch
  2. Just the Way You Are -- Bruno Mars
  3. Despacito(Remix) -- Luis Fonsi;Daddy Yankee;Justin Bieber
  4. 没有什么不同 -- 曲婉婷
  5. 故乡--许巍
  6. Jar Of Love -- 曲婉婷
  7. I Really Like You -- Carly Rae Jepsen