js 播放音乐按钮（初踩坑JS加载与audio接口:点击头像开始/暂停背景音乐）

时间2025-06-20 23:35:09分类IT科技浏览4591

导读：背景封楼期间难得空闲，也静不下心学习，空闲之余萌生了重做引导单页的想法。因为之前都是扒站(某大公司游戏官网 +小改，一来虽然很炫酷，但本人水平有限，仍有很大一部分JS无从下手，甚至是看不懂|-_-|；二来对方毕竟没有开源，无论道德还是法律都说不过去，所以……先从简单处写起，后续慢慢迭代吧！...

背景

封楼期间难得空闲，也静不下心学习，空闲之余萌生了重做引导单页的想法。因为之前都是扒站(某大公司游戏官网)+小改，一来虽然很炫酷，但本人水平有限，仍有很大一部分JS无从下手，甚至是看不懂|-_-|；二来对方毕竟没有开源，无论道德还是法律都说不过去，所以……先从简单处写起，后续慢慢迭代吧！

大致布局:Flex

参见阮一峰Flex布局教程

头像部分

手残党，暂时没有用CSS或者JS绘制特效，因为之前做头像留着底图，所以偷个懒。

CSS：鼠标指针指向头像切换gif，移开切换png 。

JS：音乐播放切换gif ，暂停切换png 。

背景音乐部分

audio接口参见 HTML audio基础API完全使用指南

我只循环播放了一首歌，所以隐藏audio主体美观一些，然后控制按钮交给头像。有需要多首歌的，可以看一下开源的APlayer

遇到的问题:JS加载阻塞,获取不到元素id

在实现头像处鼠标事件时，一直获取不到头像的id ，但是控制台调试发现代码无误。原来由于JS的机制是单线程，所以先运行JS代码，再构建相关DOM ，需要在外部引用JS时加上属性async,等构建完DOM再获取。

代码部分

HTML部分

<!DOCTYPE html> <html lang="chn"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <title>你听|睿屿青衫</title> <meta name="author" content="reashal"> <meta name="description" content="不惦来路,轻装且行"> <link rel="stylesheet" href="https://www.cnblogs.com/reashal/p/css/style.css"> <link rel="shortcut icon" href="https://cdn.yuucn.cn/wp-content/uploads/2022/08/1660473207-fb3816e5f3d4511.png"> <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"> <script src="https://images.reashal.com/resources/js/music.js" async="async"></script> </head> <body> <div class="box"> <div class="about" id="bor"> <img src="https://cdn.yuucn.cn/wp-content/uploads/2022/08/1660473207-fb3816e5f3d4511.png" id="ava" title="点我有惊喜哦" alt="头像/音乐控件"> <div id="reashal"> <h2><b>睿屿青衫</h2> <p>不惦来路,轻装且行</p> <div class="fgx"></div> <div class="icon"> <ul id="ctr"> <li><a href="https://www.reashal.com/" title="Home" target="blank"><i class="fa fa-paper-plane fa-lg"></i></a></li> <li><a href="https://www.reashal.com/index.php/cross.html" title="Mood" target="blank"><i class="fa fa-pencil fa-lg"></i></a></li> <li><a href="http://wpa.qq.com/msgrd?v=3&uin=532266666&site=ivrpano.com&menu=yes" title="QQ" target="blank"><i class="fa fa-qq fa-lg"></i></a></li> <li><a href="mailto:88811@88.com" title="Mail" target="blank"><i class="fa fa-envelope fa-lg"></i></a> </li> </ul> </div> </div> </div> </div> <div class="footer"> <a target="_blank" href="https://beian.miit.gov.cn/"> <p>鲁ICP备18004237号</p> </a> </div> <div>  <canvas class="fireworks"></canvas> <script type="text/javascript" src="https://images.reashal.com/resources/js/djtx.js"></script> </div> <div> <audio controls id="music" loop> <source src="https://images.reashal.com/resources/music/LettingGo.mp3" type="audio/mpeg"> </audio> </div> </body> </html>

CSS部分

html, body { height: 100%; width: 100%; margin: 0; padding: 0; } body { background-image: linear-gradient(to right, #ec6fa3, #2f4af2); } .box { position: fixed; height: 100%; width: 100%; /* box铺满屏幕,需要html和body取消边距 */ display: flex; align-items: center; justify-content: center; /* 盒子内部水平垂直居中对齐 */ } .about { width: 70%; max-width: 750px; background-color: rgba(219, 245, 245, 0.1); padding: 1%; } #ava { display: block; width: 100px; height: 100px; border: 2px solid #1eccef; margin: auto; margin-top: 3%; border-radius: 100px; } #ava:hover { content: url("https://cdn.yuucn.cn/wp-content/uploads/2022/08/1660473192-fb3816e5f3d4511.gif"); } #reashal { color: rgb(255, 255, 255); text-align: center; margin: auto; } .fgx { height: 1px; background-color: white; } ul, li { display: inline-block; list-style: none; padding: 1vh; margin: auto; } i:hover { color: #ec6fa3; } .footer { bottom: 3%; width: 100%; position: fixed; text-align: center; } a, p { color: white; font-size: 16px; text-decoration: none; } #music { display: none; }

JS部分

音乐部分 var x = document.getElementById(ava); // 单击头像开始/暂停背景音乐 var music = document.getElementById(music); x.onclick = function () { if (music.paused) { music.play(); } else { music.pause(); } } //播放音乐旋转头像 music.onplay = function () { x.src = https://cdn.yuucn.cn/wp-content/uploads/2022/08/1660473192-fb3816e5f3d4511.gif; x.title = 点击暂停背景音乐; } //暂停音乐停止旋转头像 music.onpause = function () { x.src = https://cdn.yuucn.cn/wp-content/uploads/2022/08/1660473207-fb3816e5f3d4511.png; x.title = 点击开启背景音乐; } 点击特效部分

不贴了，想要的自己从我这里下载，别人写的我也看不懂……

暂时完工

后续 想起什么学会点新东西

再加

成品展示以后慢慢更新吧

展开全文READ MORE

进程net1（InoRpc.exe进程有什么作用 InoRpc进程是什么文件）

js 播放音乐 按钮（初踩坑JS加载与audio接口:点击头像开始/暂停背景音乐）

背景