我想我的网页哔哔每当用户超过我的<textarea>的最大字符限制。
当前回答
/*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上不受支持,但微软已经停产了。如果您在特定的浏览器上有任何问题,请报告。
其他回答
使用CSS,你可以这样做,如果你添加以下样式的标签,但你需要一个wav文件:
<style type="text/css">
.beep {cue: url("beep.wav") }
</style>
var body=document.getElementByTagName("body");
body.className=body.className + " " + "beep";
我用新的音频API写了一个函数来发出哔哔声。
var beep = (function () {
var ctxClass = window.audioContext ||window.AudioContext || window.AudioContext || window.webkitAudioContext
var ctx = new ctxClass();
return function (duration, type, finishedCallback) {
duration = +duration;
// Only 0-4 are valid types.
type = (type % 5) || 0;
if (typeof finishedCallback != "function") {
finishedCallback = function () {};
}
var osc = ctx.createOscillator();
osc.type = type;
//osc.type = "sine";
osc.connect(ctx.destination);
if (osc.noteOn) osc.noteOn(0); // old browsers
if (osc.start) osc.start(); // new browsers
setTimeout(function () {
if (osc.noteOff) osc.noteOff(0); // old browsers
if (osc.stop) osc.stop(); // new browsers
finishedCallback();
}, duration);
};
})();
jsFiddle。
现在用JavaScript AudioContext API就很简单了。主要的桌面和移动网络浏览器完全支持它…
let context = null;
const beep = (freq = 520, duration = 200, vol = 100) => {
const oscillator = context.createOscillator();
const gain = context.createGain();
oscillator.connect(gain);
oscillator.frequency.value = freq;
oscillator.type = "square";
gain.connect(context.destination);
gain.gain.value = vol * 0.01;
oscillator.start(context.currentTime);
oscillator.stop(context.currentTime + duration * 0.001);
}
document.querySelector('button').addEventListener('click', function () {
context = new AudioContext();
beep();
});
我写了一个小应用程序,可以播放马里奥游戏中的音乐,不需要任何音频文件,只有运行时。在我看来,这很有趣,你可以看到源代码并听它。
function beep(freq = 660, duration = 90, vol = 50) { var context = new(window.AudioContext || window.webkitAudioContext); const oscillator = context.createOscillator(); const gain = context.createGain(); gain.gain.setValueAtTime(0, context.currentTime); gain.gain.linearRampToValueAtTime(1, context.currentTime + 0.002); oscillator.connect(gain); oscillator.frequency.value = freq; oscillator.type = "square"; gain.connect(context.destination); oscillator.start(context.currentTime); oscillator.stop(context.currentTime + duration * .001); oscillator.onended = () => context.close(); } <br> <center><button onclick="beep()">Beep!</button></center>
注意:把这段代码放在你想要出现哔哔声的地方。 并且记住指定存储哔哔声的目录或文件夹(源)。
<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一样的通知,通知你有一个新的聊天消息