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 分钟前
小迪安全2022-2023|第35天:WEB攻防-通用漏洞&XSS跨站&反射&存储&DOM&盲打&劫持|web安全|渗透测试|
前端·安全·xss
子春一6 分钟前
Flutter for OpenHarmony:构建一个专业级 Flutter 节拍器,深入解析定时器、状态同步与音乐节奏交互设计
javascript·flutter·交互
这个昵称也不能用吗?12 分钟前
React 19 【use】hook使用简介
前端·react.js·前端框架
web小白成长日记14 分钟前
修复 Storybook MDX 中 “does not provide an export named ‘ArgsTable‘” 的实战
前端
Aotman_22 分钟前
Vue <template v-for> key should be placed on the <template> tag.
前端·javascript·vue.js
摘星编程32 分钟前
在OpenHarmony上用React Native:自定义useTranslation翻译功能
javascript·react native·react.js
A_nanda40 分钟前
vue快速学习框架
前端·javascript·vue.js·学习·c#
蜗牛攻城狮41 分钟前
“直接 URL 下载” vs “前端 Blob 下载”:原理、区别与最佳实践
前端·javascript·二进制流
海绵宝宝_43 分钟前
Chrome强开Gemini助手教程
前端·人工智能·chrome
爱上妖精的尾巴1 小时前
7-16 WPS JS宏 RandBetween、Address实例8--[唯一性]类的应用
开发语言·javascript·wps·js宏·jsa