jQuery控制音频播放与停止示例
<!DOCTYPE html writingsuggestions="false"> <html> <head> <meta charset="utf-8" /> <title>test</title> <script type="text/javascript" src="js/jquery-3.7.1.min.js"></script> </head> <body> <audio id="myAudio"> <source src="media/short.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> <button id="playButton">play</button> <script> $(document).ready(function(){ var isplay=false; var audio = $('#myAudio')[0]; $('#playButton').click(function(){ if (isplay){ audio.pause(); audio.currentTime=0; isplay=false; $(this).text('play'); }else { $(this).text('playing'); isplay=true; audio.play(); } }); audio.addEventListener('ended', function() { // 音乐播放结束后的操作 $('#playButton').text('play'); isplay=false; console.log('音乐播放结束'); }); }); </script> </body> </html>
注意:
JS好像未提供停止函数,需要暂停+播放时间归零实现。
停止需要增加事件监听器。
EDGE浏览器新增特性, html 根元素增加 writingsuggestions="false" 避免告警。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· Vue3状态管理终极指南:Pinia保姆级教程