音频MP3在PC端兼容各浏览器播放,依赖 jPlayer 插件,需先引入该JS文件及swf文件

发表于 2016-12-28 17:47:57   |   下载附件   |   字体:
音频播放MP3播放jPlayer兼容PC端浏览器的MP3播放自定义样式

HTML部分:


<div class="audioReplyBox box">
    <div class="audioReply" id="mid_124565" address="audio/audio.mp3">
        <i class="dg-blue"></i>
    </div>
    <span class="audiotime">20"</span>
</div>

<div class="audioReplyBox box">
    <div class="audioReply" id="mid_15452124" address="audio/audio.mp3">
        <i class="dg-blue"></i>
    </div>
    <span class="audiotime">20"</span>
</div>



CSS部分:


.audioReplyBox { padding: 6px 20px; }
.audioReplyBox .audioReply { display: inline-block; position: relative; background:#29a1f7 url(audioplay.png) no-repeat 10px center; min-width: 200px; max-width: 70%; border-radius: 3px; float: left; height: 42px; }
.audioReplyBox .audioReply.ing { display: inline-block; position: relative; background:#29a1f7 url(audioplaying.gif) no-repeat 10px center; min-width: 200px; max-width: 70%; border-radius: 3px; float: left; height: 42px; }
.audioReplyBox .audioReply .dg-blue { position: absolute; display: inline-block; width: 0; height: 0; border-top: 8px solid transparent; border-right: 8px solid #29a1f7; border-bottom: 8px solid transparent; left: -6px; top:50%; margin-top: -8px; }
.audioReplyBox .audiotime { margin-left: 5px; color: #999; display: inline-block; }



JS部分:


/**
 * 音频MP3在PC端兼容各浏览器播放,依赖 jPlayer 插件,需先引入该JS文件及swf文件
 * @param  {string} node   [音频缓存ID]
 * @param  {string} isload [是否已经下载,或第一次播放]
 */
var myJPlayer = function(node, isload) {
    var me = $('#' + node);
    var address = me.attr('address');
    if (isload) {
        if (me.hasClass('ing')) {
            me.removeClass('ing');
            me.jPlayer("pause");
        } else {
            me.addClass('ing');
            me.jPlayer("play");
        }
    } else {
        me.jPlayer({
            play: function() {
                // stop all players except this one.
                $(this).jPlayer("pauseOthers", 0);
                $('.audioReply').removeClass('ing');
                // 当前
                me.css({ width: '100px', height: '32px' }).append('<i class="dg-blue"></i>');
                me.addClass('ing');
            },
            ready: function() {
                $(this).jPlayer("setMedia", {
                    mp3: address
                }).jPlayer("play");
            },
            ended: function() {
                // The $.jPlayer.event.ended event
                // Repeat the media
                // $(this).jPlayer("play"); 
                me.removeClass('ing');
            },
            size: {
                width: '100px',
                height: '32px',
                cssClass: ""
            },
            swfPath: "http://static.hrloo.com/hrloo/global/plugins/jplayer/js/jquery.jplayer.swf",
            supplied: "mp3"
        });
    }
}

$(function(){
    $('body').on('click','.audioReply',function(){
        if($(this).attr('loaded')){
            myJPlayer(this.id,true);
        }else{
            myJPlayer(this.id);
            $(this).attr('loaded',true);
        }
    }); 
});



注意依赖JS文件

jq180.js 以上最好,这样可以后绑定事件

jplayer/js/jquery.jplayer.min.js