给前端来点音乐，用JS让网页动起来！

2023-01-17 06:03:02

用 JavaScript 掌控音频：开启听觉盛宴

驾驭音乐世界：从插入音频标签开始

踏上音乐之旅的第一步，便是将 <audio> 标签嵌入你的 HTML 代码中，就像这样：

<audio src="audio/example.mp3" controls>
  抱歉，您的浏览器不支持播放音频。
</audio>

它就像在网页上放置了一个唱片机，让你可以通过控件轻松操作音频文件，播放、暂停、调整音量，一切都尽在你的掌控之中。

JavaScript 魔法：释放音频控制力

为了让音乐如你所愿，你需要召唤 JavaScript 的力量。首先，用它找到音频元素：

const audioElement = document.querySelector('audio');

现在，你的 JavaScript 法杖已经准备就绪，你可以用它改变音频元素的属性，让音乐随心所欲。这里有几个咒语：

播放音频：

audioElement.play();

暂停音频：

audioElement.pause();

调整音量：

audioElement.volume = 0.5; // 0 到 1 之间的数字代表音量大小

循环播放：

audioElement.loop = true;

监听音频播放状态：

audioElement.addEventListener('play', function() {
  console.log('音频开始播放');
});

audioElement.addEventListener('pause', function() {
  console.log('音频暂停播放');
});

实战演练：在网页游戏中奏响音效

想象一下，你正在创造一款网页游戏，希望在玩家点击按钮时触发一个音效。用 JavaScript，你可以这样实现：

<button id="play-button">点击播放音效</button>

<audio id="audio-element" src="audio/sound-effect.mp3"></audio>

const button = document.getElementById('play-button');
const audioElement = document.getElementById('audio-element');

button.addEventListener('click', function() {
  audioElement.play();
});