我想我的网页哔哔每当用户超过我的<textarea>的最大字符限制。


当前回答

当我们读到这个答案时,HTML5将为你解决这个问题,如果你愿意这样做的话。所有现代浏览器都支持HTML5音频。

下面是示例的副本:

var snd = new Audio("file.wav"); // buffers automatically when created
snd.play();

其他回答

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>

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

当我们读到这个答案时,HTML5将为你解决这个问题,如果你愿意这样做的话。所有现代浏览器都支持HTML5音频。

下面是示例的副本:

var snd = new Audio("file.wav"); // buffers automatically when created
snd.play();
<html>
<head>
    <script src='https://surikov.github.io/webaudiofont/npm/dist/WebAudioFontPlayer.js'></script>
    <script src='https://surikov.github.io/webaudiofontdata/sound/0000_JCLive_sf2_file.js'></script>
    <script>
        var selectedPreset=_tone_0000_JCLive_sf2_file;
        var AudioContextFunc = window.AudioContext || window.webkitAudioContext;
        var audioContext = new AudioContextFunc();
        var player=new WebAudioFontPlayer();
        player.loader.decodeAfterLoading(audioContext, '_tone_0000_JCLive_sf2_file');
    </script>
</head>
<body>
    <p><a href="#" onmousedown="player.queueWaveTable(audioContext, audioContext.destination, selectedPreset, 0, 55, 3.5);">Play a note</a></p>
    <hr/>
    <p><a href="https://github.com/surikov/webaudiofont">source</a></p>
</body>

听这里 https://jsbin.com/lamidog/1/edit?html,output

使用CSS,你可以这样做,如果你添加以下样式的标签,但你需要一个wav文件:

<style type="text/css">
        .beep {cue: url("beep.wav") }
</style>

var body=document.getElementByTagName("body");
body.className=body.className + " " + "beep";