HEXO添加音乐播放器

image

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

HTML5 音乐播放器

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

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

    1
    2
    3
    4
    5
    6
    ~/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
    ~/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
    ~/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
    ~/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
    ~/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.jssetProgress函数中加入

      1
      2
      3
      4
      5
      6
      7
      8
      ~/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
      ~/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
      ~/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
      ~/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()控制播放器是否一直弹出,注释掉即可。

Donate comment here
Title - Artist
0:00