we new

Blog添加楽功能

在之前主题的时候就添加过一次背景音乐,不过效果不是很好。两个缺点:首先因为是直接调用的网易云音乐的外链播放器,不能够隐藏,和整体的风格不是很搭;其次是在手机端上的浏览器时需要点击触发,效果不是很好。
这次是参考了Never_Yu的High一下的实现,将他的代码中的音乐播放的部分抽离出来,效果还是不错的,下面就给出 参考的链接 和 修改后的代码:Hexo-NexT搭建个人博客(二)Hexo-NexT搭建个人博客(三)

文件位置:\themes\next\layout\ _partials\header.swig
代码插入位置: 在 ul 标签之间加入以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!-- 参考Never_yu的High一下功能
网站位置:https://neveryu.github.io/2016/09/30/hexo-next-two,
https://neveryu.github.io/2016/11/11/hexo-next-three/-->
<li class="menu-item"> <a href='javascript:(
function go() {
var songs = [
"http://m2.music.126.net/O8RMqPVgtz5Qp_i1PBeBaQ==/5969248627774562.mp3",
"http://m2.music.126.net/3HglVSQUxqesNvCL2WKBUg==/1244647162662086.mp3",
];
function S() {
var e = document.getElementById("audio_element_id");
if(e != null){
var index = parseInt(e.getAttribute("curSongIndex"));
if(index > songs.length - 2) {
index = 0;
} else {
index++;
}
e.setAttribute("curSongIndex", index);
}
e.src = i;
e.play()
}
function initAudioEle() {
var e = document.getElementById("audio_element_id");
if(e === null){
e = document.createElement("audio");
e.setAttribute("curSongIndex", 0);
e.id = "audio_element_id";
e.loop = false;
e.bgcolor = 0;
e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";
document.body.appendChild(e);
e.addEventListener("ended", function() {
go();
}, true);
}
}
initAudioEle();
var curSongIndex = parseInt(document.getElementById("audio_element_id").getAttribute("curSongIndex"));
var i = songs[curSongIndex];
S();
})()'>
<i class="menu-item-icon fa fa-music fa-fw"></i>楽</a> </li>
<!-- end High一下 -->

想添加别的音乐的话,需要直接在代码中修改 var songs = [ ] 的网址。
需要注意的是网址需要的音乐是直链外链,我用的网易云音乐,但是并不能直接复制网址来,我是从csdn上下载了一个外链获取的小工具,等我这几天查一下,看能不能给出源码,发到博客上。

(p.s. 自从加上了这个功能,这个Blog我可以待一整天==)


声明: 本文转载前需与作者联系并标明出处
分享到: