前端音频播放与暂停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();
        }
    }
}
原文地址:https://www.cnblogs.com/ivan5277/p/12877286.html