JavaScript
HTML5
jQuery
js
audio

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

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