HEXO添加音乐播放器

发表于 2016-02-09 分类于 Hexo 本文字数： 948 阅读时长 ≈ 3 分钟

HTML5 音乐播放器 jQuery 插件参考HTML5 悬浮音乐播放器和h5 audio 播放器。

HTML5 音乐播放器

下载播放器密码：oznd，解压后丢到站点根目录，也就是source-static目录下面。在站点_config.yml中，设置skip_rende: static/**（两个星号）

如果你想整个博客都能够播放音乐，添加如下代码：

~/hexo/themes/next/layout/_layout.swig{% include '_third-party/exturl.swig' %}

+ {% include '_my/audio.swig' %}

</body>
</html>

在 ~/hexo/themes/next/layout 中新建_my目录和audio.swig 文件，添加如下代码：

~/hexo/themes/next/layout/_my/audio.swig{% if theme.audio.enable %}
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
	<title></title>
	<link rel="stylesheet" href="/static/css/player.css">
</head>

<div id="QPlayer">
	<div id="pContent">
		<div id="player">
			<span class="cover"></span>
			<div class="ctrl">
				<div class="musicTag marquee">
					<strong>Title</strong>
					 <span> - </span>
					<span class="artist">Artist</span>
				</div>
				<div class="progress">
					<div class="timer left">0:00</div>
					<div class="contr">
						<div class="rewind icon"></div>
						<div class="playback icon"></div>
						<div class="fastforward icon"></div>
					</div>
					<div class="right">
						<div class="liebiao icon"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="ssBtn">
				<div class="adf"></div>
		</div>
	</div>
	<ol id="playlist"></ol>
</div>
<script src="//cdn.bootcss.com/jQuery.Marquee/1.3.94/jquery.marquee.min.js"></script>
<script>
  var playlist = [];
  {% for src in theme.audio.sources %}
  playlist.push({title:'{{src.title}}',artist:'{{src.artist}}',mp3:'{{ src.mp3 }}',cover:'{{src.cover}}'})
  {% endfor %}
  var isRotate = true;
  var autoplay = false;
</script>
<script src="/static/js/player.js"></script>
<script>
  function bgChange(){
	var lis= $('.lib');
	for(var i=0; i<lis.length; i+=2)
	lis[i].style.background = 'rgba(246, 246, 246, 0.5)';
  }
  window.onload = bgChange;
</script>
{% endif %}

在主题配置文件中添加如下项：其中sources就是我们主要要填写的配置项。enable是控制整个播放器是否开启。如果有多个音乐的话，每个音乐之间用,隔开。

~/hexo/themes/next/_config.ymlaudio:
  enable: true
  sources: [
  { title: '爱是昂贵的',
    artist: '声音玩具',
    mp3: 'http://m2.music.126.net/66i9ySu3BLIQ8_fwK9yvVQ==/7963762720382833.mp3',
    cover: 'http://img.xiami.net/images/album/img29/3029/16250159661472438031.jpg' }
  ]

获取音乐外链，使用前试听一下得到的音乐链接。

修改 HTML5 音乐播放器颜色：

~/hexo/source/static/css/player.css#pContent .ssBtn {
	width:20px;
	height:60px;
+	background:#1abc9c none repeat scroll 0% 0%;
	position:relative;
	right:0px;
	bottom:0px;
	box-sizing:border-box;
	border-left:none;
	cursor:pointer;
	display:box-shadow:;
	float:right;
}

#playlist li:hover {
	color:#716e6e;
	font-weight:bold;
+	border-left:3px solid #1abc9c;
	padding:3px 15px 3px 11px;
}

#playlist li.playing {
  color:#716e6e;
	font-weight:bold;
+	border-left:3px solid #bc1a1a;
	padding:3px 15px 3px 11px;
}

HTML5 音乐播放器添加音量控制。播放器里是有两个上一首和下一首的按钮的，左键点击他们就会切换歌曲，那么我们让他右键点击降低和升高声音就好啦。无缓存第一次的声音存在 bug，如有缓存时，音量默认为系统音量的 0.2 倍。

~/hexo/source/static/js/player.js$(document).bind("contextmenu", function () {
    return false;
})
$('.rewind').on('click', function () {
    if (isShuffle) {
        shufflePlay(0);
    } else {
        switchTrack(--currentTrack);
    }
}).mousedown(function (e) {
    if (3 == e.which) {
        if (audio.volume >= 0.05) {
            audio.volume -= 0.05
        } else {
            audio.volume = 0;
        }
        localStorage.volume = audio.volume
    }
});
$('.fastforward').on('click', function () {
    if (isShuffle) {
        shufflePlay(1);
    } else {
        switchTrack(++currentTrack);
    }
}).mousedown(function (e) {
    if (3 == e.which) {
        if (audio.volume <= 0.95) {
            audio.volume += 0.05
        } else {
            audio.volume = 1;
        }
        localStorage.volume = audio.volume
    }
});

HTML5 音乐播放器使用localstorage存储音乐的播放状态：

在~/hexo/source/static/js/player.js的setProgress函数中加入

~/hexo/source/static/js/player.jsvar setProgress = function (value) {
    var currentSec = parseInt(value % 60) < 10 ? '0' + parseInt(value % 60) : parseInt(value % 60),
        ratio = value / audio.duration * 100;

    $('.timer').html(parseInt(value / 60) + ':' + currentSec);
+   localStorage.time = value
+   localStorage.song = currentTrack
}

loadMusic函数后面，新定义一个函数。sessionStorage.autoPlay = "true"控制自动播放。

~/hexo/source/static/js/player.jsvar FirstLoad = function (i, time) {
    if (i == undefined) {
        i = 0
        currentTrack = 0
        shuffleIndex = 0
    }
    loadMusic(i)
    if (time) {
        audio.currentTime = time
    }
    if (localStorage.volume) {
        audio.volume = localStorage.volume
    }
    if (sessionStorage.autoPlay == undefined) {
        sessionStorage.autoPlay = "true"
    }

}

修改currentTrack的赋值部分。

~/hexo/source/static/js/player.jsvar currentTrack = localStorage.song, audio, timeout;
var shuffle_array = localStorage.qplayer_shuffle_array;

if (isShuffle && shuffle_array != undefined && playlist.length === (shuffleArray = JSON.parse(shuffle_array)).length) {
    shuffleIndex = 0;
    if (currentTrack == undefined) {
        currentTrack = shuffleArray[0];
        $('#QPlayer .cover').attr('title', '点击关闭随机播放');
    }
} else {
    isShuffle = false;
    $('#QPlayer .cover').attr('title', '点击开启随机播放');
}

然后，将最开始调用的loadMusic替换为FirstLoad函数，这样就可以在打开 / 刷新页面时将播放上次的音乐和上次的时间。

~/hexo/source/static/js/player.js- loadMusic(currentTrack);
+ FirstLoad(currentTrack, localStorage.time);
if (sessionStorage.autoPlay == "true") {
    play()
}
if (localStorage.volume == undefined) {
    localStorage.volume = 0.2
}

~/hexo/source/static/js/player.js的$("div.ssBtn").click()控制播放器是否一直弹出，注释掉即可。