前端音频播放与暂停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(); } } }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?