ブラウザをもっと活用！JavaScriptで音声を鳴らしてユーザー体験を向上させる

2024-04-03

JavaScriptでサウンド通知を再生する方法

HTML5 Audio要素を使用する

これは、最もシンプルで直接的な方法です。 HTML5 <audio> 要素を使用して、サウンドファイルを埋め込み、JavaScriptを使用して再生できます。

利点:

シンプルで使いやすい
すべての主要なブラウザでサポートされている

複数のサウンドを同時に再生するのが難しい
音声ファイルを事前に用意する必要がある
音声の制御が限られている

例:

<audio id="my-sound" controls>
  <source src="sound.mp3" type="audio/mpeg">
</audio>

const audioElement = document.getElementById("my-sound");

// 音声を再生
audioElement.play();

// 音声を停止
audioElement.pause();

Web Audio APIは、より高度なサウンド制御を提供します。複数のサウンドを同時に再生したり、音声をリアルタイムで生成したりできます。

高度なサウンド制御
音声をリアルタイムで生成可能

const context = new AudioContext();

// 音声ファイルを読み込む
const buffer = await context.decodeAudioData(await fetch("sound.mp3").then(response => response.arrayBuffer()));

// 音声を再生する
const source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);
source.start(0);

SoundJSのようなライブラリは、サウンドの再生をさらに簡略化します。これらのライブラリは、ブラウザ間の互換性を確保し、さまざまな機能を提供します。

使いやすい
ブラウザ間の互換性を確保
さまざまな機能を提供

自分でコードを書くよりも複雑
ライブラリのサイズが大きくなる

// SoundJSをロード
createjs.Sound.load("sound.mp3");

// 音声を再生
createjs.Sound.play("sound");

シンプルな通知音のみを再生したい場合は、HTML5 Audio要素を使用するのが最善です。
より高度なサウンド制御が必要な場合は、Web Audio APIを使用する必要があります。
使いやすさを重視する場合は、SoundJSのようなライブラリを使用するのが良いでしょう。

その他の考慮事項

音声ファイルの形式: MP3、WAV、OGGなど、さまざまな形式があります。すべてのブラウザでサポートされている形式を選択する必要があります。
音声ファイルのサイズ: ファイルサイズが大きいほど、読み込みと再生に時間がかかります。
著作権: 使用する音声ファイルの著作権を確認する必要があります。

JavaScriptを使用して、さまざまな方法でサウンド通知を再生できます。上記の情報を使用して、ニーズに合った方法を選択してください。

<audio id="my-sound" controls>
  <source src="sound.mp3" type="audio/mpeg">
</audio>

const audioElement = document.getElementById("my-sound");

// ボタンをクリックすると音を再生
document.getElementById("my-button").addEventListener("click", () => {
  audioElement.play();
});

Web Audio APIを使用する

const context = new AudioContext();

// 音声ファイルを読み込む
const buffer = await context.decodeAudioData(await fetch("sound.mp3").then(response => response.arrayBuffer()));

// ボタンをクリックすると音を再生
document.getElementById("my-button").addEventListener("click", () => {
  // 音声を再生する
  const source = context.createBufferSource();
  source.buffer = buffer;
  source.connect(context.destination);
  source.start(0);
});

SoundJSを使用する

// SoundJSをロード
createjs.Sound.load("sound.mp3");

// ボタンをクリックすると音を再生
document.getElementById("my-button").addEventListener("click", () => {
  // 音声を再生
  createjs.Sound.play("sound");
});

これらのサンプルコードは、さまざまな方法でサウンド通知を再生する方法を示しています。自分のニーズに合わせてコードを編集してください。

JavaScriptでサウンド通知を再生するその他の方法

<audio> 要素と JavaScript を使用して、ブラウザ内蔵の通知音を再生する

ブラウザには、アラート、エラー、メッセージなど、さまざまな通知音があらかじめ用意されています。これらの音は、<audio> 要素と JavaScript を使用して再生できます。

非常に簡単

音声をカスタマイズできない

<audio id="my-sound">
  <source src="assets/sounds/notification.wav" type="audio/wav">
</audio>

const audioElement = document.getElementById("my-sound");

// ボタンをクリックすると音を再生
document.getElementById("my-button").addEventListener("click", () => {
  audioElement.play();
});

Howler.jsのようなライブラリは、ブラウザ間の互換性を確保し、さまざまな機能を提供します。

// Howler.jsをロード
const Howler = require("howler");

// 音声ファイルを読み込む
const sound = new Howler.Sound({
  src: "assets/sounds/notification.wav"
});

// ボタンをクリックすると音を再生
document.getElementById("my-button").addEventListener("click", () => {
  sound.play();
});

Web Audio APIを使用して、リアルタイムで音声を生成することができます。これは、より高度な通知音を作成したい場合に便利です。

非常に柔軟
独自の通知音を作成できる

複雑
知識と経験が必要

const context = new AudioContext();

// リアルタイムで音声を生成する
const oscillator = context.createOscillator();
oscillator.frequency.setValueAtTime(440, context.currentTime);
oscillator.connect(context.destination);
oscillator.start(0);

// ボタンをクリックすると音を停止
document.getElementById("my-button").addEventListener("click", () => {
  oscillator.stop(0);
});