前端音频播放与暂停deom

$(document).ready(function(){
        //彩铃逻辑
        // console.log($(".ringstone_audio").length)
        if($(".ringstone_audio").length>0){//online_id:3400
        var ringstone_audio = $(".ringstone_audio").attr("data-audio");
            $("#slider").append('\
                <div class="ringtone ringtone_start">\
                <audio  id="ringtone" src="'+ringstone_audio + '" controls="controls" hidden>\
                    您的浏览器不支持 audio 标签。\
                </audio>\
                </div>\
            ')
            var ring_status = true;
            $(".ringtone").click(function(){
                playOrPause("ringtone");
                if(ring_status){
                $(".ringtone").removeClass("ringtone_start").addClass("ringtone_pause");
                }else{
                $(".ringtone").removeClass("ringtone_pause").addClass("ringtone_start");
                }
                ring_status = !ring_status;
            })
            // //监听播放完成
            $("#ringtone")[0].addEventListener('ended', function () {
                ring_status = true;
                $(".ringtone").removeClass("ringtone_pause").addClass("ringtone_start");
            })
        }
    })

 

 

 

//控制音频
function playOrPause(elemId,type) {
    var elem = document.getElementById(elemId);
    if(elem){
        if (elem.paused) {
            elem.play();
        }
        else {
            elem.pause();
        }
    }
}

 

posted @ 2020-05-12 17:01  expworld  阅读(461)  评论(0编辑  收藏  举报