$(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%20+%20'" 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();
        }
    }
}

總結

以上是生活随笔為你收集整理的前端音频播放与暂停deom的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。