browser 相关问题

比如说，我想在文档中插入几个，但这些<script>的优先级非常低，因此，我希望这些插入在浏览器空闲时执行。窗户。</desc> <question vote="0"> <p>比如说，我想在文档中插入几个<pre><code><script></code></pre>，但这些<pre><code><script></code></pre>的优先级非常低，因此，我希望这些插入在浏览器空闲时执行。</p> <p><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback" rel="nofollow noreferrer"><pre><code>window.requestIdleCallback</code></pre></a> 似乎是一个足够的方法来做到这一点，但我们不应该对 <pre><code>window.requestIdleCallback</code></pre> 内部的 DOM 进行更新。</p> <p>将操作传递给 <em>just</em> <a href="https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame" rel="nofollow noreferrer"><pre><code>window.requestAnimationFrame</code></pre></a> 似乎不够，因为它将仅在下一帧上执行，而 <strong> 不会 </strong> 当浏览器空闲时执行。</p> <p>我应该像这样把<pre><code>window.requestAnimationFrame</code></pre>包裹在<pre><code>window.requestIdleCallback</code></pre>里面吗？:</p> <pre><code>window.requestIdleCallback(() => { window.requestAnimationFrame(() => { /* Insert scripts */ }); }); </code></pre> <p>有更好/更合适的方法吗？</p> <p>这个问题并不是真正针对插入 <pre><code><script></code></pre> 的特定情况，而是针对当浏览器空闲时想要延迟任何 DOM 操作的任何情况（这听起来像是一个非常常见的用例）。</p> </question> <answer tick="false" vote="0"> <p>我自己没有这个需要。看看你的建议，也许队列是一个有效的选择</p> <pre><code>const domManipulationQueue = []; const performDOMManipulations = () => { if (domManipulationQueue.length <= 0) return; // done const task = domManipulationQueue.shift(); task(); // Execute the task }; // Add tasks to the queue when needed domManipulationQueue.push(() => { // Insert script 1 }); domManipulationQueue.push(() => { // Insert script 2 }); window.requestIdleCallback(() => { performDOMManipulations(); // Execute the queued DOM manipulations }); </code></pre> </answer> </body></html>

javascript performance dom browser

回答 0 投票 0

如何让 JavaScript 发出蜂鸣声？

我希望我的网页在用户超过我的的最大字符限制时发出蜂鸣声。</desc> <question vote="323"> <p>我希望我的网页在用户超出我的 <pre><code><textarea></code></pre> 的最大字符限制时发出蜂鸣声。</p> </question> <answer tick="false" vote="612"> <p><strong>解决方案</strong></p> <p>您现在可以使用 <a href="http://en.wikipedia.org/wiki/Base64" rel="noreferrer">base64 文件</a> 在作为 <a href="http://en.wikipedia.org/wiki/Data_URI_scheme" rel="noreferrer">data URI</a> 导入时产生声音。解决方案与之前的解决方案几乎相同，只是您不需要导入外部音频文件。</p> <pre><code>function beep() { var snd = new Audio("data:audio/wav;base64,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qJrx4KOQjahZxWbcZgztj2c49nKmkId44S71j0c8eV9yDK6uPRzx5X18eDvjvQ6yKo9ZSS6l//8elePK/Lf//IInrOF/FvDoADYAGBMGb7FtErm5MXMlmPAJQVgWta7Zx2go+8xJ0UiCb8LHHdftWyLJE0QIAIsI+UbXu67dZMjmgDGCGl1H+vpF4NSDckSIkk7Vd+sxEhBQMRU8j/12UIRhzSaUdQ+rQU5kGeFxm+hb1oh6pWWmv3uvmReDl0UnvtapVaIzo1jZbf/pD6ElLqSX+rUmOQNpJFa/r+sa4e/pBlAABoAAAAA3CUgShLdGIxsY7AUABPRrgCABdDuQ5GC7DqPQCgbbJUAoRSUj+NIEig0YfyWUho1VBBBA//uQZB4ABZx5zfMakeAAAAmwAAAAF5F3P0w9GtAAACfAAAAAwLhMDmAYWMgVEG1U0FIGCBgXBXAtfMH10000EEEEEECUBYln03TTTdNBDZopopYvrTTdNa325mImNg3TTPV9q3pmY0xoO6bv3r00y+IDGid/9aaaZTGMuj9mpu9Mpio1dXrr5HERTZSmqU36A3CumzN/9Robv/Xx4v9ijkSRSNLQhAWumap82WRSBUqXStV/YcS+XVLnSS+WLDroqArFkMEsAS+eWmrUzrO0oEmE40RlMZ5+ODIkAyKAGUwZ3mVKmcamcJnMW26MRPgUw6j+LkhyHGVGYjSUUKNpuJUQoOIAyDvEyG8S5yfK6dhZc0Tx1KI/gviKL6qvvFs1+bWtaz58uUNnryq6kt5RzOCkPWlVqVX2a/EEBUdU1KrXLf40GoiiFXK///qpoiDXrOgqDR38JB0bw7SoL+ZB9o1RCkQjQ2CBYZKd/+VJxZRRZlqSkKiws0WFxUyCwsKiMy7hUVFhIaCrNQsKkTIsLivwKKigsj8XYlwt/WKi2N4d//uQRCSAAjURNIHpMZBGYiaQPSYyAAABLAAAAAAAACWAAAAApUF/Mg+0aohSIRobBAsMlO//Kk4soosy1JSFRYWaLC4qZBYWFRGZdwqKiwkNBVmoWFSJkWFxX4FFRQWR+LsS4W/rFRb/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VEFHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAU291bmRib3kuZGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMjAwNGh0dHA6Ly93d3cuc291bmRib3kuZGUAAAAAAAAAACU="); snd.play(); } beep(); </code></pre> <p><strong>兼容性</strong></p> <p>现在几乎所有浏览器都支持数据 URI。更多信息请访问 <a href="http://caniuse.com/datauri" rel="noreferrer">http://caniuse.com/datauri</a></p> <p><strong>演示</strong></p> <p><a href="http://jsfiddle.net/7EAgz/" rel="noreferrer">http://jsfiddle.net/7EAgz/</a></p> <p><strong>转换工具</strong></p> <p>您可以在此处将 mp3 或 wav 文件转换为 Data URI 格式：</p> <p><a href="https://dopiaza.org/tools/datauri/index.php" rel="noreferrer">https://dopiaza.org/tools/datauri/index.php</a></p> </answer> <answer tick="true" vote="148"> <p>无法直接在 JavaScript 中完成。您需要在 HTML 中嵌入一个简短的 WAV 文件，然后通过代码播放该文件。</p> <p>示例：</p> <pre><code><script> function PlaySound(soundObj) { var sound = document.getElementById(soundObj); sound.Play(); } </script> <embed src="success.wav" autostart="false" width="0" height="0" id="sound1" enablejavascript="true"> </code></pre> <p>然后您可以从 JavaScript 代码中调用它，如下所示：</p> <pre><code>PlaySound("sound1"); </code></pre> <p>这应该完全符合您的要求 - 您只需要自己找到/创建蜂鸣声，这应该是微不足道的。</p> </answer> <answer tick="false" vote="140"> <pre><code>/*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); </code></pre> <p>最上面的答案当时是正确的，但现在是错误的；你可以用纯 JavaScript 来完成。但是使用 javascript 的一个答案不再起作用，并且其他答案非常有限或不使用纯 javascript。</p> <p>我制作了自己的解决方案，效果很好，可以让您控制音量、频率和波形。</p> <pre><code>//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)); }; </code></pre> <p>有人建议我编辑此内容以注意它仅适用于某些浏览器。然而，据我所知，所有现代浏览器似乎都支持<a href="http://caniuse.com/#search=audiocontext" rel="nofollow noreferrer">音频上下文。 IE 不支持它，但 Microsoft 已停止使用它。如果您在特定浏览器上遇到任何问题，请报告。</a> </p> </answer> <answer tick="false" vote="88">我编写了一个使用新音频 API 发出蜂鸣声的函数。<p> </p><code>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); }; })(); </code><pre> </pre><p>jsFiddle<a href="http://jsfiddle.net/55Kfu/1506/" rel="noreferrer">.</a> </p> </answer> <answer tick="false" vote="82">根据 <p>Houshalter 的建议<a href="https://stackoverflow.com/a/29641185/642706">，我制作了这个简单的音调合成器演示。</a> </p>截图<h1> </h1>这是一个屏幕截图。尝试本答案中进一步的实时演示（单击 <p>运行代码片段<em>）。</em> </p><p><a href="https://i.stack.imgur.com/9a8od.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tLzlhOG9kLnBuZw==" alt=""/></a> </p>演示代码<h1> </h1><p></p> <div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div><code>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 ); };</code><pre> </pre><code>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></code><pre> </pre> </div> </div><p> </p>您可以在此处克隆和调整代码： <p>JS Bin 上的音调合成器演示<a href="http://jsbin.com/tupoyi/4/edit?html,js,output" rel="noreferrer"></a> </p>玩得开心！<p> </p>兼容浏览器：<h2> </h2> <ul>Chrome 移动版和桌面版 <li> </li>Firefox 移动版和桌面版<li> </li>Opera 移动版、迷你版和桌面版<li> </li>安卓浏览器<li> </li>Microsoft Edge 浏览器<li> </li>iPhone 或 iPad 上的 Safari<li> </li> </ul>不兼容<h2> </h2> <ul>Internet Explorer 版本 11（但可以在 Edge 浏览器上运行）<li> </li> </ul> </answer> <answer tick="false" vote="48">正如我们在<p>这个答案<a href="https://stackoverflow.com/a/1934325/456584">中读到的那样，如果您愿意采用该路线，HTML5 将为您解决这个问题。 </a>所有现代浏览器<a href="http://html5readiness.com/" rel="noreferrer">都支持 HTML5 音频。</a> </p>这是示例的副本：<p> </p><code>var snd = new Audio("file.wav"); // buffers automatically when created snd.play(); </code><pre> </pre> </answer> <answer tick="false" vote="47">这将使您能够多次播放声音，与投票最高的答案相比：<p> </p><code>var playSound = (function beep() { var snd = new Audio("data:audio/wav;base64,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qJrx4KOQjahZxWbcZgztj2c49nKmkId44S71j0c8eV9yDK6uPRzx5X18eDvjvQ6yKo9ZSS6l//8elePK/Lf//IInrOF/FvDoADYAGBMGb7FtErm5MXMlmPAJQVgWta7Zx2go+8xJ0UiCb8LHHdftWyLJE0QIAIsI+UbXu67dZMjmgDGCGl1H+vpF4NSDckSIkk7Vd+sxEhBQMRU8j/12UIRhzSaUdQ+rQU5kGeFxm+hb1oh6pWWmv3uvmReDl0UnvtapVaIzo1jZbf/pD6ElLqSX+rUmOQNpJFa/r+sa4e/pBlAABoAAAAA3CUgShLdGIxsY7AUABPRrgCABdDuQ5GC7DqPQCgbbJUAoRSUj+NIEig0YfyWUho1VBBBA//uQZB4ABZx5zfMakeAAAAmwAAAAF5F3P0w9GtAAACfAAAAAwLhMDmAYWMgVEG1U0FIGCBgXBXAtfMH10000EEEEEECUBYln03TTTdNBDZopopYvrTTdNa325mImNg3TTPV9q3pmY0xoO6bv3r00y+IDGid/9aaaZTGMuj9mpu9Mpio1dXrr5HERTZSmqU36A3CumzN/9Robv/Xx4v9ijkSRSNLQhAWumap82WRSBUqXStV/YcS+XVLnSS+WLDroqArFkMEsAS+eWmrUzrO0oEmE40RlMZ5+ODIkAyKAGUwZ3mVKmcamcJnMW26MRPgUw6j+LkhyHGVGYjSUUKNpuJUQoOIAyDvEyG8S5yfK6dhZc0Tx1KI/gviKL6qvvFs1+bWtaz58uUNnryq6kt5RzOCkPWlVqVX2a/EEBUdU1KrXLf40GoiiFXK///qpoiDXrOgqDR38JB0bw7SoL+ZB9o1RCkQjQ2CBYZKd/+VJxZRRZlqSkKiws0WFxUyCwsKiMy7hUVFhIaCrNQsKkTIsLivwKKigsj8XYlwt/WKi2N4d//uQRCSAAjURNIHpMZBGYiaQPSYyAAABLAAAAAAAACWAAAAApUF/Mg+0aohSIRobBAsMlO//Kk4soosy1JSFRYWaLC4qZBYWFRGZdwqKiwkNBVmoWFSJkWFxX4FFRQWR+LsS4W/rFRb/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VEFHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAU291bmRib3kuZGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMjAwNGh0dHA6Ly93d3cuc291bmRib3kuZGUAAAAAAAAAACU="); return function() { snd.play(); } })(); playSound(); // Play first time playSound(); // Play second time </code><pre> </pre> </answer> <answer tick="false" vote="24">现在使用 JavaScript <p>AudioContext API<a href="https://developer.mozilla.org/en/docs/Web/API/AudioContext" rel="noreferrer"> 就足够简单了。主要桌面和移动网络浏览器</a>完全支持<a href="https://caniuse.com/#search=AudioContext" rel="noreferrer">...</a> </p><code>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(); }); </code><pre> </pre>我编写了一个小应用程序，可以在没有任何音频文件的情况下播放马里奥游戏中的音乐，只需运行时。我认为这很有趣，你可以查看<p>源代码<a href="https://gist.github.com/tripolskypetr/a793967504aa6fcc0d3ebb30d1642dec" rel="noreferrer">并聆听。</a> </p><p><a href="https://i.stack.imgur.com/OI1Vd.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL09JMVZkLnBuZw==" alt=""/></a> </p> </answer> <answer tick="false" vote="7">使用 CSS，如果将以下样式添加到标签中，您就可以做到这一点，但您将需要一个 <p><code>wav</code><pre> 文件：</pre> </p><code><style type="text/css"> .beep {cue: url("beep.wav") } </style> var body=document.getElementByTagName("body"); body.className=body.className + " " + "beep"; </code><pre> </pre> </answer> <answer tick="false" vote="5">此代码支持多次蜂鸣声的排序，以及频率的逐渐变化（“ramp”标志）。下面给出了两个示例。<p> </p><code><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> </code><pre> </pre> </answer> <answer tick="false" vote="4">以下是我如何使用 HTML5 让它发出蜂鸣声：首先，我复制 Windows wav 文件并将其转换为 mp3，然后使用以下代码：<p> </p><code>var _beep = window.Audio("Content/Custom/Beep.mp3") function playBeep() { _beep.play()}; </code><pre> </pre>全局声明声音文件并根据需要引用它会更快。<p> </p> </answer> <answer tick="false" vote="3">没有跨浏览器的方法可以用纯 JavaScript 来实现这一点。相反，您可以使用一个小的 .wav 文件，并使用嵌入或对象标签来播放。<p> </p> </answer> <answer tick="false" vote="1"><code>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(); } } </code><pre> </pre>适用于使用 Win7 操作系统的 Chrome、IE、Mozilla。需要服务器上有 <p><code>beep.wav</code><pre> 文件。</pre> </p> </answer> <answer tick="false" vote="0"><code>function Sound(url, vol, autoplay, loop) { var that = this; that.url = (url === undefined) ? "" : url; that.vol = (vol === undefined) ? 1.0 : vol; that.autoplay = (autoplay === undefined) ? true : autoplay; that.loop = (loop === undefined) ? false : loop; that.sample = null; if(that.url !== "") { that.sync = function(){ that.sample.volume = that.vol; that.sample.loop = that.loop; that.sample.autoplay = that.autoplay; setTimeout(function(){ that.sync(); }, 60); }; that.sample = document.createElement("audio"); that.sample.src = that.url; that.sync(); that.play = function(){ if(that.sample) { that.sample.play(); } }; that.pause = function(){ if(that.sample) { that.sample.pause(); } }; } } var test = new Sound("http://mad-hatter.fr/Assets/projects/FreedomWings/Assets/musiques/freedomwings.mp3"); test.play(); </code><pre> </pre><p>http://jsfiddle.net/sv9j638j/<a href="http://jsfiddle.net/sv9j638j/" rel="nofollow"></a> </p> </answer> <answer tick="false" vote="0">注意：将此代码放入您的 JavaScript 中您希望发出蜂鸣声的位置。并记住指定存储蜂鸣声的目录或文件夹（源）。<p> </p><code><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> </code><pre> </pre>参考：<p>http://www.9lessons.info/2013/04/play-notification-sound-using-jquery.html<a href="http://www.9lessons.info/2013/04/play-notification-sound-using-jquery.html" rel="nofollow noreferrer">.</a> </p>我在我正在开发的社交媒体中实现了这一点，它可以在聊天时找到类似 Facebook 的通知，通知您有新的聊天消息<p> </p> </answer> <answer tick="false" vote="0"><p></p> <div data-babel="false" data-lang="js" data-hide="false" data-console="false"> <div><code>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(); }</code><pre> </pre><code><br> <center><button onclick="beep()">Beep!</button></center></code><pre> </pre> </div> </div><p> </p> </answer> <answer tick="false" vote="0"><code><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> </code><pre> </pre>听这里 <p>https://jsbin.com/lamidog/1/edit?html,输出<a href="https://jsbin.com/lamidog/1/edit?html,output" rel="nofollow noreferrer"></a> </p> </answer> <answer tick="false" vote="-3">您需要从某个地方提供声音文件。这是来自 <p>Scriptaculous<a href="http://github.com/madrobby/scriptaculous/downloads" rel="nofollow noreferrer"> 的声音库的代码：</a> </p><code>//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(){}; } </code><pre> </pre> </answer></body>

javascript audio browser beep

回答 0 投票 0

无效的字符串长度 array.join javascript

我正在使用 SheetJS 在前端读取巨大的 excel 文件，并使用 XLSX.utils.sheet_to_json 将它们解析为 JSON。但显然，它超出了V8的极限。用小fi测试时效果很好...

javascript html excel browser sheetjs

回答 1 投票 0

JavaScript 有没有办法监听控制台事件？

我正在尝试用 Javascript 编写未捕获异常和浏览器警告的处理程序。所有错误和警告均应发送到服务器以供稍后查看。可以轻松捕获已处理的异常

javascript browser cross-browser dom-events

回答 6 投票 0

如何知道 Firefox 中是否点击了刷新按钮或浏览器后退按钮？ [重复]

如何知道 Firefox 中是否单击了刷新按钮或单击了浏览器后退按钮？对于这两个事件，onbeforeunload() 方法都是回调。对于 Internet Explorer，我正在处理...

javascript browser cross-browser dom-events

回答 4 投票 0

`webdriver.Chrome()` 使用 Python 在 Selenium 中获取哪个版本的 chrome 驱动程序？

我知道下面的 webdriver.Chrome() 可以获取 chrome 驱动程序，但我不知道它获取的是哪个版本的 chrome 驱动程序，因为文档没有任何此类解释。 *我使用Selenium 4.11.2：来自

python selenium-webdriver browser selenium-chromedriver version

回答 2 投票 0

检查安装了哪些浏览器，然后在桌面上创建快捷方式

我们可以借助以下代码检查用户计算机上安装的浏览器。如果 File.Exists("C:\Program Files (x86)\Google\Chrome\Applicatio

vb.net browser

回答 0 投票 0

如何下载Chromium代码的特定文件夹？

最近，我尝试下载chromium浏览器的源代码。详细来说，我只是想在 https://github.com/chromium/chromium/tree/master/chrome 下载代码。我尝试了几种方法，例如

git github browser download chromium

回答 2 投票 0

我收到“拒绝执行来自‘http://localhost:3000/js/dashboard/dashboard.js’的脚本，因为其 MIME 类型（‘text/plain’）不可执行

我的代码在我使用时有效 //我的js代码但我试图将 JavaScript 代码放在 ejs(HTML) 文件之外，我创建新的 js 文件，将代码放入其中我导入到我的...

html express browser ejs

回答 1 投票 0

控制台中显示错误 Crbug/1173575，已弃用非 JS 模块文件。网站无法在我的互联网上加载，但在另一个互联网上加载了相同的内容

网页未在我的 Wi-Fi/互联网上加载，但同一网页在另一个互联网连接上加载。控制台中显示错误 Crbug/1173575，已弃用非 JS 模块文件。我通过删除修复了它...

javascript google-chrome browser

回答 1 投票 0

browser 相关问题

最新问题