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>
相关推荐
祈澈菇凉7 分钟前
Next.js 零基础开发博客后台管理系统教程(一):环境搭建与项目初始化
开发语言·javascript·ecmascript
良木林14 分钟前
webpack:快速搭建环境
前端·webpack·node.js
网络点点滴16 分钟前
Vue3路由的props
前端·javascript·vue.js
last demo21 分钟前
grep和sed
linux·运维·前端·chrome
-曾牛23 分钟前
深入解析 XSS 漏洞:原理、分类与攻防实战
前端·安全·web安全·网络安全·渗透测试·xss·原理解析
JK凯28 分钟前
前端调试技巧
前端·visual studio code·前端工程化
开源之眼36 分钟前
github star 基础IO 文件在内核中是怎么被管理的 重定向的含义 在自定义shell中加入重定向
前端
JZXStudio36 分钟前
独立开发者亲测:MLX框架让我的App秒变AI原生!15年iOS老兵的2025新感悟
前端·ios
cindershade36 分钟前
Vue 3:我在真实项目中如何用事件委托
前端
我叫黑大帅37 分钟前
存储管理在开发中有哪些应用?
前端·后端·全栈