How do I make JavaScript beep?

beep,

引言

如何讓瀏覽器發出嗶嗶聲。

參考文件

How do I make JavaScript beep?Stack Overflow

原始碼紀錄 - 法一

直接包裝成全域函式。

index.html
<script>
   //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));
   };
 </script>

原始碼紀錄 - 法二

包裝成 JS 動態模組服務 。

JSInterOpService.cs

using Microsoft.JSInterop;

public class JSInterOpService : IAsyncDisposable
{
  //# resource
  readonly Lazy<Task<IJSObjectReference>> moduleTask;

  public JSInterOpService(IJSRuntime jsr)
  {
    moduleTask = new(() => jsr.InvokeAsync<IJSObjectReference>(
        "import", "./js/interop-module.js").AsTask());
  }

  public async ValueTask DisposeAsync()
  {
    if (moduleTask.IsValueCreated)
    {
      var module = await moduleTask.Value;
      await module.DisposeAsync();
    }
  }

  /// <summary>
  /// 讓瀏覽器發出嗶嗶聲。
  /// </summary>
  public async Task BeepAsync()
  {
    var jsModule = await moduleTask.Value;
    await jsModule.InvokeVoidAsync("beep");
  }
}

JavaScript 實作

interop-module.js

/// 讓瀏覽器發出嗶嗶聲
///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
/// ref→[How to make beep sound in JavaScript](https://stackoverflow.com/questions/879152/how-to-make-beep-sound-in-javascript)
export async function beep(duration, frequency, volume, type, callback) {
  //if you have another AudioContext class use that one, as some browsers have a limit
  const audioCtx = new (window.AudioContext || window.webkitAudioContext || window.audioContext);

  const oscillator = audioCtx.createOscillator();
  const 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));
}

應用於 Blazor UI

@inject JSInterOpService jsTool

async Task HandleScanSuccess(string _decodedText)
{
  decodedText = _decodedText;
  await jsTool.BeepAsync();
  await OnCodeChange.InvokeAsync(_decodedText);
}

(EOF)