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>
相关推荐
BBB努力学习程序设计1 分钟前
Web App开发入门:页面分析与环境准备全攻略
前端·html
BBB努力学习程序设计6 分钟前
超好用的轮播图神器:Swiper插件入门指南
前端·html
帧栈29 分钟前
开发避坑指南(70):Vue3 Http请求头携带token下载pdf文件解决方案
前端·vue.js
h***066537 分钟前
项目升级Sass版本或升级Element Plus版本遇到的问题
前端·rust·sass
凌波粒1 小时前
CSS基础详解(1)
前端·css
U***e632 小时前
JavaScript数据分析
开发语言·javascript·数据分析
IT_陈寒2 小时前
Spring Boot 3.2 性能翻倍秘诀:这5个配置优化让你的应用起飞🚀
前端·人工智能·后端
b***67642 小时前
【JavaEE】Spring Web MVC
前端·spring·java-ee
Mintopia2 小时前
🧭 Claude Code 用户工作区最佳实践指南
前端·人工智能·claude
Mintopia3 小时前
🌐 多用户并发请求下的 WebAIGC 服务稳定性技术保障
javascript·人工智能·自动化运维