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>
相关推荐
invicinble1 分钟前
关于对vue的认识
javascript·vue.js·ecmascript
EF@蛐蛐堂4 分钟前
【vue】Vite 生态 5 个 “新玩具“
前端·javascript·vue.js
风之舞_yjf12 分钟前
Vue基础(29)_props配置项、ref属性
前端·vue.js
Fairy要carry33 分钟前
项目03-手搓Agent之团队协作(发消息/分配任务)
linux·前端·python
hzb666661 小时前
xd_day32-day40
java·javascript·学习·安全·web安全·tomcat·php
东北甜妹1 小时前
Python脚本
java·开发语言·前端
四千岁1 小时前
WSL + OpenCode 最佳实践:环境一致、模型配置、GUI 远程使用
前端·javascript·后端
你挚爱的强哥1 小时前
【sgCreateQrcode】自定义组件:模仿草料二维码做了一个简单的二维码制作组件
javascript·vue.js·elementui
进击的雷神1 小时前
攻克JSON嵌套HTML的双重解析难题:基于多层数据提取的精准爬虫设计
爬虫·html·json·spiderflow
ssshooter1 小时前
Tauri 2 Linux 上 asset://localhost 访问返回 403 避坑指南
前端·后端·架构