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>
相关推荐
江城开朗的豌豆5 分钟前
webpack了解吗,讲一讲原理,怎么压缩代码
前端·javascript·微信小程序
_xaboy6 分钟前
开源设计器 FcDesigner 限制组件是否可以拖入的教程
前端·vue.js·低代码·开源·表单设计器
江城开朗的豌豆9 分钟前
Webpack配置魔法书:从入门到高手的通关秘籍
前端·javascript·微信小程序
AnalogElectronic13 分钟前
vue3 实现记事本手机版01
开发语言·javascript·ecmascript
江城开朗的豌豆14 分钟前
玩转小程序生命周期:从入门到上瘾
前端·javascript·微信小程序
Fanfffff72018 分钟前
从TSX到JS:深入解析npm run build背后的完整构建流程
开发语言·javascript·npm
im_AMBER20 分钟前
React 10
前端·javascript·笔记·学习·react.js·前端框架
Moment24 分钟前
记录一次修改 PNPM 版本,部署 NextJs 服务时导致服务器崩溃的问题 😡😡😡
前端·javascript·后端
浪裡遊26 分钟前
css面试题1
开发语言·前端·javascript·css·vue.js·node.js
钮钴禄·爱因斯晨32 分钟前
不只是字符串:Actix-web 路由与 FromRequest的类型安全艺术
前端·安全