audiojs 音頻插件使用教程

audiojs 音頻插件使用教程

github地址

https://kolber.github.io/audiojs/

 

依賴文件

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="./audiojs/audio.min.js"></script>
<link rel="stylesheet" href="./includes/index.css" media="screen">

 

html代碼塊

<audio preload></audio>
<ol>
    <li><a href="#" data-src="2.mp3">dead wrong intro</a></li>
    <li><a href="#" data-src="2.mp3">juicy-r</a></li>
</ol>

 

js代碼塊

插件初始化

// 初始化插件
var a = audiojs.createAll({
    trackEnded: function() {
        var next = $('ol li.playing').next();
        if (!next.length) next = $('ol li').first();
        next.addClass('playing').siblings().removeClass('playing');
        audio.load($('a', next).attr('data-src'));
        audio.play();
    }
});

 

加載第一個音頻文件

// 加載第一個文件
var audio = a[0];
first = $('ol a').attr('data-src');
$('ol li').first().addClass('playing');
audio.load(first);

 

點擊列表切換播放

// 點擊列表切換播放
$('ol li').click(function(e) {
    e.preventDefault();
    $(this).addClass('playing').siblings().removeClass('playing');
    audio.load($('a', this).attr('data-src'));
    audio.play();
});

 

鍵盤控制播放

// 鍵盤控制播放
$(document).keydown(function(e) {
    var unicode = e.charCode ? e.charCode : e.keyCode;
    // ->鍵盤切換下一首
    if (unicode == 39) {
        var next = $('li.playing').next();
        if (!next.length) next = $('ol li').first();
        next.click();
        // <-切換上一首
    } else if (unicode == 37) {
        var prev = $('li.playing').prev();
        if (!prev.length) prev = $('ol li').last();
        prev.click();
        // 空格暫停
    } else if (unicode == 32) {
        audio.playPause();
    }
})