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タグを次のように記述します。

audioタグではファイル読み込みの遅延を防ぐためpreload=”auto”によってあらかじめ音源ファイルを読み込んでおく設定をしています。

JavaScriptでボタンを動作させる。

実際にボタンがクリックされた時にaudioタグの音源ファイルを使って音を鳴らすためのJavaScriptを書きます。今回はjQueryプラグイン化したものを実行しています。

デモを下に貼っておきますので参考にしてみてください。

See the Pen xGXqPP by Daisuke Koshimizu (@dkossy) on CodePen.

以上、HTML5のaudioタグでクリックすると音が鳴るボタンを作る方法でした。

参考URL

クリックすると音が鳴るボタンの作り方

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

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

follow us in feedly

Facebookページに「いいね!」して更新情報をチェック!

« »