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>
相关推荐
一颗小芹菜的日常3 分钟前
vue-crack插件是干什么的
前端·javascript·vue.js
小比特-combat6 分钟前
LVGL_1(使用示例讲解父子关系)
开发语言·前端·javascript
IT_陈寒7 分钟前
Java线程池的坑把我埋了,踩出来的血泪教训
前端·人工智能·后端
弯_弯11 分钟前
企业知识库 RAG 落地:从 Demo 到生产,四条工程链路与参数级自查
android·java·javascript
月夏11 分钟前
Node.js 读 Excel 我踩了 3 个坑,最后一个查遍 Stack Overflow 没答案
前端·javascript
亿元程序员13 分钟前
PSD都不用了!Codex直接生成Cocos预制体
前端
柳杉17 分钟前
Codex + 可视化大屏工作流实践:15 个行业场景的设计产出合集
前端·openai·数据可视化
@#¥&~是乱码鱼啦20 分钟前
ArkWeb开发手记05|SPA单页H5适配、自定义历史栈与全局状态同步
前端·harmonyos
peter676821 分钟前
vue学习小结
前端·vue.js·学习
七仔啊27 分钟前
数字孪生大屏设计器
前端