JavaScript
HTML5
jQuery
js
audio

Audioタグで効果音を鳴らすシンプルな方法

More than 1 year has passed since last update.

DEMO

追加しました
http://codepen.io/skwbr/full/RPgYbE/
http://codepen.io/skwbr/pen/RPgYbE

概要

例えば 'btn' というidの<a>タグのクリックで効果音を鳴らしたいとき。

HTML
<a id="btn">クリック</a>
こんな感じでaudioをbody末尾にでも書いておく
<audio id="btnsound" preload="auto">
<source src="sound/btnsound.mp3" type="audio/mp3">
</audio>
JS側ではこんな感じ(jQuery)
var se = $('#btnsound');
$('').on(_event, function(){
  se[0].currentTime = 0;
  se[0].play();
});

備考

  • currentTime = 0; を入れることで連打してもちゃんと鳴ります。
  • <audio preload="auto">とすることで、音源がプリロードされます。

プラグイン化

イベントと音源を引数にjQueryプラグイン化してみると場合によっては便利かもしれません。

jQueryプラグイン側
(function (window, $) {
  'use strict';

  $.fn.useSound = function (_event, _id) {
    var se = $(_id);
    this.on(_event, function(){
      se[0].currentTime = 0;
      se[0].play();
    });
    return this;
  };

})(this, this.jQuery);
用法
$('#btn').useSound('mousedown touchstart', '#btnsound');

追記1

  • 2015/6/12:Tweetしていただいてアクセスが増えたのでコードのリファクタリング兼ねてcodepenのDEMOを追加しました。

追記2

  • iOSやAndroidなどモバイル端末では、preload="auto"を指定していてもプリロードが効かない使用になっています(ユーザの意図や能動性に関わらずデータを読み込ませるための通信を発生させるべきでない、という思想?)。
  • clickなど、音源のトリガーとなるユーザ操作が発生して初めてロードが開始されるので、音源のファイルサイズによっては遅延する点に注意が必要です。