JS 播放声音 - Javascript

在Web开发中，我们经常会需要给网站添加一些声音效果来提升用户体验。在Javascript中，我们可以用一些方法来播放声音。

使用HTML5音频标签

HTML5提供了<audio>元素，可以方便的播放音频。

<audio id="myAudio">
  <source src="sound.mp3" type="audio/mpeg">
  <source src="sound.ogg" type="audio/ogg">
  Your browser does not support the audio tag.
</audio>

const audio = document.getElementById("myAudio");
audio.play();

标签内的<source>元素指定了音频文件的路径和格式。当浏览器不支持该格式时，会使用其中第一个支持的格式。如果所有格式都不支持，用户将看到"Your browser does not support the audio tag."提示。

使用Audio对象

如果不想在HTML中放置<audio>元素，可以通过Javascript创建一个Audio对象。

const audio = new Audio('sound.mp3');
audio.play();

使用new Audio()创建一个Audio对象，并指定音频文件的路径。

控制音频

可以通过一些属性和方法来控制音频的状态：

• paused：是否暂停播放
• currentTime：当前音频播放的时间位置（单位：秒）
• duration：音频总时长（单位：秒）
• volume：音量（0.0~1.0）

const audio = new Audio('sound.mp3');
audio.play();
console.log(audio.paused); // false
setTimeout(() => {
  audio.pause();
  console.log(audio.paused); // true
  audio.currentTime = 0;
  audio.play();
  setTimeout(() => {
    audio.volume = 0.5;
  }, 1000);
}, 3000);

结语

以上是Javascript中播放声音的方法，通过HTML5音频标签和Audio对象，我们可以方便的给网站添加声音效果，提升用户体验。