我很喜欢网页中加入背景音乐的效果 |21xrx.com

我很喜欢网页中加入背景音乐的效果

2023-06-16 10:33:05 深夜i -- --

JavaScript 背景音乐代码

我很喜欢网页中加入背景音乐的效果，所以我学习了如何用JavaScript实现这一功能。在此分享一下我的学习心得。

首先，我需要选择要用的音频文件。我找到了一首合适的音乐文件，并将其存放在js文件夹中。接下来，我就可以开始编写代码了。

我定义了一个函数`playMusic()`来添加音乐。在这个函数中，我使用了`document.createElement('audio')`方法来创建一个`

代码如下：


function playMusic() {
 var audio = document.createElement('audio');
 audio.src = 'js/bg_music.mp3';
 audio.autoplay = true;
 audio.loop = true;
 document.body.appendChild(audio);
}

然后，在网站加载时，我调用`playMusic()`函数，就可以让网页自动播放背景音乐了。


window.onload = function() {
 playMusic();
};

但是，有些用户可能不想听到背景音乐，所以我还添加了一个开关来启用或禁用背景音乐。我定义了一个全局变量`musicOn`表示音乐的状态，初始为`true`，表示音乐 is On。当用户点击开关时，我使用`document.querySelector()`方法来找到开关元素，并为其添加一个`click`事件监听器。在事件监听器中，我根据`musicOn`变量的值，来判断是否播放音乐。

代码如下：


var musicOn = true;
var switchBtn = document.querySelector('#music-switch');
switchBtn.addEventListener('click', function() {
 musicOn = !musicOn; // 切换音乐状态
 if (musicOn) {
  playMusic();
 } else {
  var audio = document.querySelector('audio');
  if (audio) {
   audio.pause();
  }
 }
});

最后，在网页底部，我添加了一个开关按钮，以便用户可以在需要时启用或禁用背景音乐。

代码如下：

音乐 ON

CSS样式如下：


.switch {
 position: fixed;
 bottom: 20px;
 right: 30px;
 width: 60px;
 height: 30px;
 border-radius: 15px;
 cursor: pointer;
 box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}
.switch .text {
 position: absolute;
 top: 50%;
 left: 0;
 transform: translateY(-50%);
 width: 50%;
 text-align: center;
 font-size: 14px;
 color: #fff;
}
.switch .handle {
 position: absolute;
 top: 3px;
 right: 3px;
 width: 24px;
 height: 24px;
 border-radius: 50%;
 background-color: #fff;
 box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
 transition: transform 0.3s;
}
.switch.on .text
 left: auto;
 right: 0;
.switch.on .handle {
 transform: translateX(30px);
}

通过上述方法，我成功的将背景音乐添加到了 my website 中，可以在需要时自由开启或关闭。这样，我的网站不再是那么单调，而更具有个性化的特色。

上一篇: idea打包java可执行jar包

下一篇: Java项目开发：精华案例分享

评论区

()

相似文章