原生js控制audio标签播放、暂停、重新加载
audio不仅是一个标签,也是window下的一个对象,作为对象,具有一些对象属性和对象方法:
对象属性:
currentTime:获取当前播放时间
duration:获取歌曲的总时间
pause:是否暂停,返回布尔值
对象方法:
play():播放
pause():暂停
load():重新加载
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>audio播放暂停重新播放</title> </head> <body> <audio src="https://ip-h5-nf01-sycdn.kuwo.cn/08fc62da0d838431d2c6135ddd66c5ae/5e1bdce5/resource/n2/97/38/2347707388.mp3" controls preload id="music1"> </audio> <button id="bf" onclick="bf();">播放</button> <button onclick="rbf();">重新播放</button> <script> function rbf() { var audio = document.getElementById('music1'); var bf=document.getElementById("bf"); audio.currentTime = 0; audio.play(); bf.innerText="暂停"; } function bf() { var audio = document.getElementById('music1'); var bf=document.getElementById("bf"); if (audio !== null) { if (audio.paused) { audio.play(); //audio.play();// 这个就是播放 bf.innerText="暂停"; } else { audio.pause(); // 这个就是暂停 bf.innerText="播放"; } } } </script> </body> </html>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 提示词工程——AI应用必不可少的技术
· 字符编码:从基础到乱码解决
· 地球OL攻略 —— 某应届生求职总结