我想我的网页哔哔每当用户超过我的<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上不受支持,但微软已经停产了。如果您在特定的浏览器上有任何问题,请报告。

其他回答

function beep(wavFile){
    wavFile = wavFile || "beep.wav"
    if (navigator.appName == 'Microsoft Internet Explorer'){
        var e = document.createElement('BGSOUND');
        e.src = wavFile;
        e.loop =1;
        document.body.appendChild(e);
        document.body.removeChild(e);
    }else{
        var e = document.createElement('AUDIO');
        var src1 = document.createElement('SOURCE');
        src1.type= 'audio/wav';
        src1.src= wavFile;
        e.appendChild(src1);
        e.play();
    }
}

适用于Chrome,IE,Mozilla使用Win7操作系统。 需要服务器上的beep.wav文件。

现在用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();
});

我写了一个小应用程序,可以播放马里奥游戏中的音乐,不需要任何音频文件,只有运行时。在我看来,这很有趣,你可以看到源代码并听它。

没有跨浏览器的方法来实现这纯javascript。相反,您可以使用一个小的.wav文件,使用嵌入或对象标记播放。

我用新的音频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。

根据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浏览器上可以运行)