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

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など、音源のトリガーとなるユーザ操作が発生して初めてロードが開始されるので、音源のファイルサイズによっては遅延する点に注意が必要です。