audiojs--跨浏览器的HTML音频播放器(可自定义款式)

一款跨浏览器的音频播放器,惋惜例子和文档都比较少

英文文档 官网

使用要领:

第一步援用文件:

<script src="/audiojs/audio.min.js"></script>

第二步,全局初始化:

<script>
  audiojs.events.ready(function() {
    var as = audiojs.createAll();
  });
</script>

第三步,在须要的处所放上下面相似的代码:

<audio src="/mp3/juicy.mp3" preload="auto" /> //注重是直接闭合标签

然后,然后就没有了,WTF!!!

以上只实用静态的页面,假如动态增加音频怎么办?置信好多人都须要这类功用,我也是,费了很大工夫才找到一个要领,以下:

http://stackoverflow.com/ques…

看不懂?没紧要,提取有用代码以下:

var as;
audiojs.events.ready(function () {
    as = audiojs.createAll();
});
$(document).ready(function () {
    setTimeout(function () {
        var mp3 = "http://s3.amazonaws.com/audiojs/02-juicy-r.mp3"; // audio.js example
        // creating new audio element, yours is probably added via ajax
        // [0] used to get DOM element instead of jQuery object.
        var audio = $('<audio/>', {id: 'test'}).appendTo('body').attr('src', mp3)[0];
        var testAS = audiojs.create(audio); // initialise new audio.js player
        as.push(testAS); // add "testAS" object to "as" array of objects
        console.log(as); // log "as" - now holds the original objects + "testAS"
    }, 5000); // timeout used for testing, above code can be in ajax success function instead
});

掌握HTML款式类名设置

createPlayer: {
                markup: '          <div class="headset"></div>             <div class="playname" id="playname"></div>             <div class="play-pause">             <p class="play"></p>             <p class="pause"></p>             <p class="loading"></p>             <p class="error"></p>           </div>           <div class="scrubber">             <div class="progress"></div>             <div class="loaded"></div><div class="words"> </div>           </div>           <div class="time">             <em class="played">00:00</em>/<strong class="duration">00:00</strong>           </div>           <div class="volume"></div>           <div class="error-message"></div>',
                playPauseClass: 'play-pause',
                scrubberClass: 'scrubber',
                progressClass: 'progress',
                loaderClass: 'loaded',
                timeClass: 'time',
                durationClass: 'duration',
                playedClass: 'played',
                volumeClass: 'volume',
                closingClass: 'closing',
                errorMessageClass: 'error-message',
                playingClass: 'playing',
                loadingClass: 'loading',
                errorClass: 'error'
            },
    原文作者:zone
    原文地址: https://segmentfault.com/a/1190000006102475
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞