您需要从某个地方提供声音文件。以下是来自Scriptaculous的Sound库的代码:

//Default:
<embed style="height:0" id="sound_#{track}_#{id}" src="#{url}" loop="false" autostart="true" hidden="true"/>

//For Gecko:
if(Prototype.Browser.Gecko && navigator.userAgent.indexOf("Win") > 0){
  if(navigator.plugins && $A(navigator.plugins).detect(function(p){ return p.name.indexOf('QuickTime') != -1 }))
    Sound.template = new Template('<object id="sound_#{track}_#{id}" width="0" height="0" type="audio/mpeg" data="#{url}"/>');
  else if(navigator.plugins && $A(navigator.plugins).detect(function(p){ return p.name.indexOf('Windows Media') != -1 }))
    Sound.template = new Template('<object id="sound_#{track}_#{id}" type="application/x-mplayer2" data="#{url}"></object>');
  else if(navigator.plugins && $A(navigator.plugins).detect(function(p){ return p.name.indexOf('RealPlayer') != -1 }))
    Sound.template = new Template('<embed type="audio/x-pn-realaudio-plugin" style="height:0" id="sound_#{track}_#{id}" src="#{url}" loop="false" autostart="true" hidden="true"/>');
  else
    Sound.play = function(){};
} 

注意:把这段代码放在你想要出现哔哔声的地方。 并且记住指定存储哔哔声的目录或文件夹(源)。

<script>
//Appending HTML5 Audio Tag in HTML Body
$('<audio id="chatAudio"><source src="sound/notify.ogg" type="audio/ogg"><source src="sound/notify.mp3" type="audio/mpeg"><source src="sound/notify.wav" type="audio/wav"></audio>').appendTo('body');

$('#chatAudio')[0].play();
</script>

参考:http://www.9lessons.info/2013/04/play-notification-sound-using-jquery.html。

我在我正在开发的社交媒体中实现了这一点，它的工作发现，聊天时像facebook一样的通知，通知你有一个新的聊天消息

以下是我如何使用HTML5让它发出哔哔声: 首先我复制并将windows wav文件转换为mp3，然后我使用以下代码:

var _beep = window.Audio("Content/Custom/Beep.mp3")

function playBeep() { _beep.play()};

全局声明声音文件并在需要时引用它会更快。

该代码支持多个哔哔声的排序，以及频率的逐渐变化('ramp'标志)。下面给出了两个例子。

<script>
var audioContext = null;
var oscillatorNode = null;
var stopTime = 0;

function beep (frequency, durationSec, ramp=false)
{
    if (oscillatorNode == null) {
        audioContext = new (window.AudioContext || window.webkitAudioContext) ();
        stopTime = audioContext.currentTime;

        oscillatorNode = audioContext.createOscillator();
        oscillatorNode.type = "sine";
        oscillatorNode.connect (audioContext.destination);
        if (ramp) {
            oscillatorNode.frequency.setValueAtTime (frequency, stopTime);
        }
        oscillatorNode.start ();
        oscillatorNode.onended = function() {
            oscillatorNode = null;
            audioContext = null;
        }
    }

    if (ramp) {
        oscillatorNode.frequency.linearRampToValueAtTime (frequency, stopTime); // value in hertz
    } else {
        oscillatorNode.frequency.setValueAtTime (frequency, stopTime);  // value in hertz
    }

    stopTime += durationSec;
    oscillatorNode.stop (stopTime);
}
function test1()
{
        beep (250, 0.5);
        beep (1000, 0.2);
        beep (550, 0.5);
}
    
function test2()
{
        beep (50, 2, true);
        beep (5000, 2, true);
        beep (50, 0, true);
}
</script>
    
<button onclick='test1()'>Beep!</button>
<button onclick='test2()'>Beep(ramped)!</button>

根据Houshalter的建议，我制作了这个简单的音调合成器演示。

截图

这是一个截图。在下面的答案中尝试现场演示(单击运行代码片段)。

演示代码

audioCtx = new(window.AudioContext || window.webkitAudioContext)(); show(); function show() { frequency = document.getElementById("fIn").value; document.getElementById("fOut").innerHTML = frequency + ' Hz'; switch (document.getElementById("tIn").value * 1) { case 0: type = 'sine'; break; case 1: type = 'square'; break; case 2: type = 'sawtooth'; break; case 3: type = 'triangle'; break; } document.getElementById("tOut").innerHTML = type; volume = document.getElementById("vIn").value / 100; document.getElementById("vOut").innerHTML = volume; duration = document.getElementById("dIn").value; document.getElementById("dOut").innerHTML = duration + ' ms'; } function beep() { var oscillator = audioCtx.createOscillator(); var gainNode = audioCtx.createGain(); oscillator.connect(gainNode); gainNode.connect(audioCtx.destination); gainNode.gain.value = volume; oscillator.frequency.value = frequency; oscillator.type = type; oscillator.start(); setTimeout( function() { oscillator.stop(); }, duration ); }; frequency <input type="range" id="fIn" min="40" max="6000" oninput="show()" /> <span id="fOut"></span><br> type <input type="range" id="tIn" min="0" max="3" oninput="show()" /> <span id="tOut"></span><br> volume <input type="range" id="vIn" min="0" max="100" oninput="show()" /> <span id="vOut"></span><br> duration <input type="range" id="dIn" min="1" max="5000" oninput="show()" /> <span id="dOut"></span> <br> <button onclick='beep();'>Play</button>

你可以在这里克隆和调整代码: 音调合成器的演示JS Bin

玩得开心!

兼容的浏览器:

Chrome手机和桌面 移动和桌面Firefox Opera移动，迷你和桌面 Android浏览器 微软Edge浏览器 iPhone或iPad上的Safari浏览器

不兼容的

Internet Explorer 11版(但在Edge浏览器上可以运行)

/*if you want to beep without using a wave file*/
var context = new AudioContext();
var oscillator = context.createOscillator();
oscillator.type = "sine";
oscillator.frequency.value = 800;
oscillator.connect(context.destination);
oscillator.start(); 
// Beep for 500 milliseconds
setTimeout(function () {
    oscillator.stop();
}, 100);                
            

上面的答案在当时是正确的，但现在是错误的;你可以用纯javascript实现。但是使用javascript的一个答案不再有效，而其他答案非常有限或不使用纯javascript。

我做了我自己的解决方案，工作得很好，让你控制音量，频率和波型。

//if you have another AudioContext class use that one, as some browsers have a limit
var audioCtx = new (window.AudioContext || window.webkitAudioContext || window.audioContext);

//All arguments are optional:

//duration of the tone in milliseconds. Default is 500
//frequency of the tone in hertz. default is 440
//volume of the tone. Default is 1, off is 0.
//type of tone. Possible values are sine, square, sawtooth, triangle, and custom. Default is sine.
//callback to use on end of tone
function beep(duration, frequency, volume, type, callback) {
    var oscillator = audioCtx.createOscillator();
    var gainNode = audioCtx.createGain();
    
    oscillator.connect(gainNode);
    gainNode.connect(audioCtx.destination);
    
    if (volume){gainNode.gain.value = volume;}
    if (frequency){oscillator.frequency.value = frequency;}
    if (type){oscillator.type = type;}
    if (callback){oscillator.onended = callback;}
    
    oscillator.start(audioCtx.currentTime);
    oscillator.stop(audioCtx.currentTime + ((duration || 500) / 1000));
};

有人建议我编辑一下，说明它只适用于某些浏览器。然而，据我所知，所有现代浏览器似乎都支持Audiocontext。它在IE上不受支持，但微软已经停产了。如果您在特定的浏览器上有任何问题，请报告。