话不多说, 直接开整.

播放器文件下载并引入

地址在 https://github.com/cnyist/player .

下载下来后放入 source 目录中 (主题或 Hexo 自带的皆可) , 然后用 iframe 引入 index.html 文件

1
iframe(name="player", id="player", src="/player/", frameborder="0", onload="this.width=player.jp_container_N.scrollWidth;$('.songlist__item').each(function(){generate($(this).attr('id'))});", style="z-index:100; position:fixed; left:0px; bottom:0px")

以上代码建议插入到 head 标签中 (这是 PUG 格式, 其他格式可以自行更改). 然后你就可以看见你的博客里多了一个播放器.

配置

1
2
3
4
5
6
7
8
9
10
11
var musicList = [{
title: "Life Is Beautiful",
artist: "The Afters",
mp3: "https://cdn.jsdelivr.net/gh/cnyist/music@master/The%20Afters%20-%20Life%20Is%20Beautiful/The%20Afters%20-%20Life%20Is%20Beautiful.mp3",
poster: "https://cdn.jsdelivr.net/gh/cnyist/music@master/The%20Afters%20-%20Life%20Is%20Beautiful/The%20Afters%20-%20Life%20Is%20Beautiful.jpg"
}, {
title: "Fire",
artist: "Said The Sky",
mp3: "http://music.163.com/song/media/outer/url?id=435289279.mp3",
poster: "http://p1.music.126.net/tg2zke_mrqwuOPlEIEUjGg==/18294773975127592.jpg?param=130y130"
}];

都很直白, 如果要增加歌曲或者更改就按照格式就好了.

配套播放框

在需要播放框的页面的底部引入 js/generate.js 文件, 同时写上这段 js,

1
generate_all()

并且引入 CSS css/player_box.css . 然后在需要插入音乐的地方写上

1
<li class="song_item" id="歌曲编号"></li>

其中歌曲编号是以歌曲顺序编的, 第一首为 ‘song1’ , 第二首为 ‘song2’ … 依此类推. 要插入音乐必须在播放器里配置这个音乐.

演示

1
<li class="song_item" id="song2"></li>
  • 好不好听呀~