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

HTML5 音乐播放器

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

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

    1
    2
    3
    4
    5
    6
    7
    ~/hexo/themes/next/layout/_layout.swig{% include '_third-party/exturl.swig' %}

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

    </body>
    </html>

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

    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
    56
    57
    ~/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 %}

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    ~/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' }
      ]

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

  6. 修改 HTML5 音乐播放器颜色：

    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
    ~/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;
    }

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

    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
    ~/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
        }
    });

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

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

      1
      2
      3
      4
      5
      6
      7
      8
      9
      ~/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
      }

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

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      ~/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"
          }

      }

    3. 修改currentTrack的赋值部分。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      ~/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', '点击开启随机播放');
      }

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

      1
      2
      3
      4
      5
      6
      7
      8
      9
      ~/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
      }

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