页面声音提醒:怎样实现场景触发声音?

18 min read

您可以通过在触发场景时播放声音来实现。有多种方法可以在网页中播放声音:

1.使用HTML5 元素:

<audio src="audio_file.mp3" autoplay="autoplay"></audio>

在上面的代码中,src属性是音频文件的地址,autoplay属性会使浏览器自动播放音频。

2.使用JavaScript创建和控制一个新的Audio对象:

var audio = new Audio('audio_file.mp3');
audio.play();

在上面的代码中,首先创建了一个新的Audio对象,然后使用play()方法来播放音频。

3.使用HTML5 Web Audio API:

var audioContext = new AudioContext();
var source = audioContext.createBufferSource();
var xhr = new XMLHttpRequest();
xhr.open('GET', 'audio_file.mp3', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function() {
    audioContext.decodeAudioData(xhr.response, function(buffer) {
        source.buffer = buffer;
        source.connect(audioContext.destination);
        source.start(0);
    });
};
xhr.send();

在上面的代码中,首先创建了一个新的AudioContext对象,然后创建了一个BufferSource节点,然后使用XMLHttpRequest来获取音频文件,并使用decodeAudioData()方法将其解码为一个可供播放的缓冲区,最后通过AudioContext的destination属性将它连接起来并播放。