効果音（SE）の実装解説｜JavaScript Audio Sound Effects Guide

2026年4月16日

効果音（SE）の実装デザイン見本

HTMLの <audio> タグと JavaScript の play() メソッドを使い、ボタンクリックで効果音を鳴らす実装のデモ。コピーしてすぐに使えるコードを掲載しています。

① ボタンクリックで効果音を再生する

クリックして音を確認できます（合成音によるデモ）

HTML

<button id="play-sound1">効果音(1)</button>
<button id="play-sound2">効果音(2)</button>
<button id="play-sound3">効果音(3)</button>

<!-- 音声ファイルを指定する audio 要素 -->
<audio id="audio1" src="sound1.mp3"></audio>
<audio id="audio2" src="sound2.mp3"></audio>
<audio id="audio3" src="sound3.mp3"></audio>

CSS

button {
    padding: 10px 20px;
    margin: 5px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 6px;
    border: none;
    background: #3b82f6;
    color: #fff;
    transition: opacity 0.15s;
}

button:hover {
    opacity: 0.8;
}

button:active {
    opacity: 0.5;
}

var sound1 = document.getElementById('audio1');
var sound2 = document.getElementById('audio2');
var sound3 = document.getElementById('audio3');

document.getElementById('play-sound1').addEventListener('click', function() {
    sound1.currentTime = 0;
    sound1.play();
});

document.getElementById('play-sound2').addEventListener('click', function() {
    sound2.currentTime = 0;
    sound2.play();
});

document.getElementById('play-sound3').addEventListener('click', function() {
    sound3.currentTime = 0;
    sound3.play();
});

<audio src=”…”> で音声ファイルを指定する

<audio> タグの src 属性に再生したい音声ファイル（.mp3 など）のパスを指定します。controls 属性を省略するとプレーヤーUIは非表示になり、JavaScript からのみ制御できる状態になります。

play() で再生する / currentTime = 0 で先頭に戻す

audio 要素の play() メソッドで再生が始まります。ボタンを連打したとき音が途中から鳴るのを防ぐため、play() の前に currentTime プロパティを 0 にリセットするのが定番の書き方です。

② 音声ファイル不要！Web Audio API で合成音を鳴らす

クリックして波形ごとの音を確認できます

HTML

<button id="play-beep">ビープ音を鳴らす</button>

var AudioCtx = window.AudioContext || window.webkitAudioContext;

function playBeep() {
    if (!AudioCtx) return;
    var ctx = new AudioCtx();
    var osc = ctx.createOscillator();
    var gain = ctx.createGain();
    
    osc.connect(gain);
    gain.connect(ctx.destination);
    
    osc.type = 'sine'; // 波形: sine, square, triangle, sawtooth
    osc.frequency.value = 880; // 周波数(Hz)
    
    // 音が急に切れた時の「プツッ」というノイズを防ぐ
    gain.gain.setValueAtTime(0.3, ctx.currentTime);
    gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.5);
    
    osc.start(ctx.currentTime);
    osc.stop(ctx.currentTime + 0.5);
}

document.getElementById('play-beep').addEventListener('click', function() {
    playBeep();
});

ファイルなしでブラウザ上で音を作る方法

AudioContext を使うことで、ブラウザ上で直接「ピー」「プー」といった音を生成できます。クリック音やちょっとしたエラー音など、わざわざ mp3 等の音声ファイルを用意するほどではない UI効果音の実装に最適です。

波形（type）と周波数（frequency）で音色を変える

osc.type に ‘square’ を指定するとファミコンのようなピコピコ音に、’sine’ だと電話のボタン音のような丸い音になります。また、osc.frequency.value の数値を大きくすると高い音、小さくすると低い音になります。

このページのデモについて：音声ファイルなしで動作させるため、Web Audio API の合成音を使用しています。実際の実装では <audio> タグに mp3 ファイルを指定してください。効果音は効果音ラボなどで無料配布されています。

当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。

効果音（SE）の実装解説｜JavaScript Audio Sound Effects Guide

効果音（SE）の実装 デザイン見本

① ボタンクリックで効果音を再生する

② 音声ファイル不要！Web Audio API で合成音を鳴らす

効果音（SE）の実装デザイン見本