HTML/JS添加音乐

HTML/JS添加背景音乐

由于需要避免浏览器不必要的资源消耗,音乐播放必须要有事件触发


文章目录


html

  • 在body中添加你的音乐

    csharp 复制代码
    <body>
    <audio autoplay="autopaly" loop="loop" id="audios">
    	<source src="../music/潮汐 (Natural)-傅梦彤.128.mp3" type="audio/mp3" />
    </audio>
    </body>

js

  • 在js中添加这段播放触发事件

    javascript 复制代码
    <script type="text/javascript">
    	     // 将以下代码添加到js入口函数内即可
    		 document.addEventListener('touchstart', function () {
              document.getElementById('audios').play()
          })
    
          document.addEventListener('click', function () {
              document.getElementById('audios').play()
          })
    
          document.addEventListener('load', function () {
              document.getElementById('audios').play()
          })
    </script>
相关推荐
jenchoi413几秒前
软件供应链npm/pypi投毒预警情报【2025-11-09】
前端·安全·web安全·网络安全·npm·node.js
艾小码2 分钟前
别再只会用默认插槽了!Vue插槽这些高级用法让你的组件更强大
前端·javascript·vue.js
JaguarJack5 分钟前
CSS 也要支持 if 了 !!!CSS if() 函数来了!
前端·css
恋猫de小郭8 分钟前
Flutter 3.38 发布,快来看看有什么更新吧
android·前端·flutter
wuk9986 小时前
实现ROS系统的Websocket传输,向Web应用推送sensor_msgs::Image数据
前端·websocket·网络协议
合作小小程序员小小店8 小时前
web网页开发,在线%考试管理%系统,基于Idea,vscode,html,css,vue,java,maven,springboot,mysql
java·前端·系统架构·vue·intellij-idea·springboot
天天进步20158 小时前
CSS Grid与Flexbox:2025年响应式布局终极指南
前端·css
Boop_wu9 小时前
[Java EE] 计算机基础
java·服务器·前端
Novlan19 小时前
TDesign UniApp 组件库来了
前端
用户47949283569159 小时前
React DevTools 组件名乱码?揭秘从开发到生产的代码变形记
前端·react.js