前端音频播放与暂停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 @   expworld  阅读(461)  评论(0编辑  收藏  举报
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?
点击右上角即可分享
微信分享提示