HTML5のaudioタグでクリックすると音が鳴るボタンを作る方法
越水大輔
こんにちは、福岡のホームページ制作シンス株式会社の越水です。
クリックすると音が鳴るボタンは「ちゃんとクリックした」というユーザーの認知を助けます。
今回はHTML5のaudioタグを使って、音が出るボタンの作成方法をご紹介します。
目次
音が出るボタンはFlashじゃなくても実現できる。
こうした音が出る表現は一昔前はFlashサイトなどでよく見られたのですが、HTML5のaudioタグでも同様の表現が可能です。
まずは音源ファイルを用意する。
取り急ぎ必要になるのはボタンをクリックした時に出る音源ファイルです。
フリーの音源素材サイトなどがあるので好みの音源（SE）を探してみましょう。
いくつかSEがダウンロードできるサイトをピックアップしてみましたが、他にも色々あると思うので検索してみてください。
用意する音源ファイルの形式は、mp3がIE9以上に対応、wavがChrome、Safari、Firefox、Operaに対応しています。（2015年6月現在）
「音声ファイルがmp3しか用意できなかった…。」というような場合は次のWebサービスを使えば音源ファイルのフォーマット変換が行えます。
Online Audio Converter (MP3, WAV, Ogg, WMA, M4A, AAC) media.io
ファイルをアップロードして変換したいフォーマットを選ぶだけなので簡単です。
audioタグを使って音源ファイルを読み込む
音源が用意できたらHTMLを書いていきましょう。
ボタン用の要素とaudioタグを次のように記述します。
|
1 2 3 4 5 |
<p class="btn"><a onclick="sound()">クリック</a></p> <audio id="sound" preload="auto"> <source src="sound.mp3" type="audio/mp3"> <source src="sound.wav" type="audio/wav"> </audio> |
audioタグではファイル読み込みの遅延を防ぐためpreload=”auto”によってあらかじめ音源ファイルを読み込んでおく設定をしています。
JavaScriptでボタンを動作させる。
実際にボタンがクリックされた時にaudioタグの音源ファイルを使って音を鳴らすためのJavaScriptを書きます。
今回はjQueryプラグイン化したものを実行しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
(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 a').useSound('mousedown touchstart', '#sound'); |
デモを下に貼っておきますので参考にしてみてください。
See the Pen xGXqPP by Daisuke Koshimizu (@dkossy) on CodePen.
以上、HTML5のaudioタグでクリックすると音が鳴るボタンを作る方法でした。
参考URL
クリックすると音が鳴るボタンの作り方 HTML5 – Audioタグで効果音を鳴らすシンプルな方法 – Qiita
お見積りは無料です。ホームページやWebマーケティングに関するお悩みをお聞かせください。
〈 この記事を書いた人 〉
WEBプロデューサー越水大輔
シンス株式会社 代表取締役
社内ではWeb制作のディレクション、マーケティング、経営を担当しています。Webマーケティングで福岡に元気な企業を増やします。
