【スマホ対応】クリックすると音が鳴る！「あいさつボタン」の設置方法

• 2014.07.11(Fri) 18:30
• WEB制作

• Tweet

• 

この度、ブログのサイドバー(スマホの場合はページ下部の著者プロフィール欄)に「挨拶(あいさつ)ボタン」を設置してみました。ボタンをクリックすると、時間帯に合わせて私が挨拶します。

今回は、この「あいさつボタン」の魅力と設置方法についてサラッと紹介します！「クリックすると音を鳴らす」というコンテンツは、挨拶以外にも応用できるはずなので、チェックしておいて損はありません！

ちなみに、先に見ておきたい…という人のために、完成版のコードとデモは「こちら」にあります。

あいさつボタンについて

「あいさつボタンって何？」という方のために、サンプルを用意しました。下記をクリックすると、私の挨拶が響き渡ります。公共の場ではご注意下さい(笑)。

こんな感じで、「訪問者と"声"でコミュニケーションを取ろう」というのが、このボタンの趣旨です。「挨拶」って、特に目的がなくても、交わすだけで気持ちいいじゃないですか。それに私の声はともかく、人の声って、聞くとなんか安心しませんか？このボタンを設置すれば、そんな「挨拶の疑似体験」を、ワンクリック、わずか1秒で、ユーザーに提供できちゃいます。

和田憲幸さんに感謝

私が最も尊敬している一人である「シンクグラフィカ」の和田憲幸さん。元々、この「あいさつボタン」は、和田さんの発想で生まれたものです。先日、偶然チャットでお見かけし、「あいさつボタンを普及していいですか？」と質問したら「ぜひ、どうぞ」とお返事をいただけたため、今回、この記事の公開に至りました。

和田さんのブログ(デスクトップ版)に行けば、私よりも千倍ほど爽やかな和田さんの挨拶を聞くことができます。

音を鳴らすボタンの設置方法

ということで、この「あいさつボタン」、すなわち、「クリックすると、効果音が鳴るコンテンツ」の設置方法を紹介します。とっても簡単なので、ぜひ、取り入れてみて下さいね。Javascriptを利用しますが、jQueryは不要です。

音を鳴らすための「ボタン」を用意する

まずは「ボタンの役割となる要素」を用意しましょう。ボタンのアイコンじゃなくても、テキストでも写真でも大丈夫です。例えば上記サンプルは、応用で作った「猫の写真をクリックすると、鳴き声が響く」というもの。ペット紹介ページなんかで使えそうですね。音源は「効果音ラボ様」の素材を利用しました。

ちなみに「私もあいさつボタンを設置したい！」と思っている人は、よろしければ、サンプルの「あいさつボタン画像」を持って行って使って下さい。280x80以下のサイズでご利用いただければ、Retina Displayにも対応します。

鳴らしたい「効果音」を用意する

次に、ユーザーに聴かせたい「効果音」を用意しましょう。

iPhoneを持っている人は、標準アプリの「ボイスメモ」を使えば簡単に作成することができます。音声を録音した後、作成した音声を上記図のボタンをタップして、メールでデスクトップに送信して下さい。デスクトップでm4a形式のファイルを保存することができます。

用意するファイル形式(ブラウザ別のaudioファイル対応状況)

ブラウザによって、再生できる拡張子が違うため、同じ音声ファイルでも、複数種類の拡張子を用意しなければいけません。2014年7月現在、具体的には、.mp3と.wavを用意すれば、主要ブラウザ全てに対応することができるようです。

なお、ブラウザごとの対応状況については、下記サイトを参考にさせていただきました。

音声ファイルを変換するオンラインツール

音声ファイルを用意するのに、わざわざソフトをダウンロードするのは面倒くさい…。ということで、音声ファイルの変換をオンライン上で行なえる便利なwebサービス、「media.io」を紹介します。下記ページにアクセスして下さい。

使い方は極めてシンプルで、用意してある音声ファイルをアップロードし、変換したいファイル形式を選ぶだけ。このwebサービスを利用して、.wav、.mp3の音声ファイルを用意して下さいね！

HTMLを用意する

ボタンと音声が用意できたら、いよいよ、HTMLとJavascriptを作っていきましょう。まずはHTMLです。

<!-- テキストボタンの場合 -->
<p><a onClick="hello()">このテキストを押すと挨拶します！</a></p>

<!-- 画像ボタンの場合 -->
<p><a onClick="hello()"><img src="http://syncer.jp/images/hello/hello-button.png" width="280" height="80"/></a></p>

<!-- 音声ファイルの読み込み 9〜10行目にURLを指定 -->
<audio id="hello-file" preload="auto">
	<source src="http://〜.mp3" type="audio/mp3">
	<source src="http://〜.wav" type="audio/wav">
</audio>

1〜5行目

ボタンとなる画像、またはテキストにonClick属性を付けて、「クリックしたらJavascriptのhello()という関数を呼び出す」という風に設定します。

7〜11行目

音声ファイルを読み込むために、HTML5の規格に従ってaudioタグを利用しています。audioタグ内で、sourceタグを使って、.mp3、.wavというように複数種類のファイルを指定しておくことで、ブラウザがその中から「読み込めるファイル」を自動で選択してくれます。audioタグには、任意のID(サンプルではhello-file)を付けて下さい。

Javascriptを用意する

仕上げにJavascriptを用意します。たった1行だけの単純なプログラムです。play()は、任意の音声ファイルや動画ファイルを再生できる命令です。

function hello(){
	//[ID:hello-file]の音声ファイルを再生[play()]する
	document.getElementById("hello-file").play();
}

HTML5における音声ファイルの操作について、詳しく知りたい方は、下記のリファレンスが分かりやすくてお勧めです。

jQueryの場合

念のため、jQueryで同じようにプログラムを作成したい人向けに紹介しておきます。例えば、$("#hello-file").play()では動作しない点にご注意下さい。get(0)が必要です。ここハマりがちです…。

function hello(){
	$("#hello-file").get(0).play();
}

クリックイベントを設定する場合は、次のように記述します。ボタンとなる要素にid="hello-button"を加えて下さいね！

//[ID:hello-button]をクリックしたら…
$("#hello-button").click(function(){
	//[ID:hello-file]の音声ファイルを再生する
	$("#hello-file").get(0).play();
});

「get(0)って何のこっちゃ!?」という方は、下記のリファレンスをご覧下さい。

音を鳴らすボタンのサンプルプログラム

以上を踏まえた完成版が次の通りです。一度、そのままコピーして試してみて下さいね。画像や音声ファイルは素材として自由にご利用いただいて大丈夫ですが、動作確認後の「直リンク」はご遠慮下さい。

Mac版の「Google Chrome」「Safari」「Opera」「Firefox」、Windows版の「Ie9」、iPhone版の「Safari」、Nexus7版の「Google Chrome」で動作確認済みです。

デモを見る

<!-- テキストボタンの場合 -->
<p><a onClick="hello()">このテキストを押すと挨拶します！</a></p>
 
<!-- 画像ボタンの場合 -->
<p><a onClick="hello()"><img src="http://syncer.jp/images/hello/hello-button.png" width="280" height="80"/></a></p>
 
<!-- 音声ファイルの読み込み 9〜10行目にURLを指定 -->
<audio id="hello-file" preload="auto">
  <source src="http://syncer.jp/images/hello/02.mp3" type="audio/mp3">
  <source src="http://syncer.jp/images/hello/02.wav" type="audio/wav">
</audio>

<!-- クリックで音を鳴らすJavascriptプログラム -->
<script>
function hello(){
  //[ID:hello-file]の音声ファイルを再生[play()]する
  document.getElementById("hello-file").play();
}
</script>

ボタン連打での再生に対応する方法

ここからは、本筋から少し離れた、色々なアレンジ方法の紹介です。例えば「こんにちは」という「あいさつボタン」を連続でクリックすると「こ、こ、こ、こんにちは」となるように、ボタン連打に対応する方法を紹介します。

デモを見る

それにはJavascriptで、再生する前に「音声を巻き戻す」という処理を追加します。それがcurrentTime = 0の部分、4〜5行目です。

<!-- クリックで音を鳴らすJavascriptプログラム -->
<script>
function hello(){
	//音声ファイルを巻き戻す(再生位置[秒]を0に設定する)
	document.getElementById("hello-file").currentTime = 0;

	//[ID:hello-file]の音声ファイルを再生[play()]する
	document.getElementById("hello-file").play();
}
</script>

こうすることで、ボタンをクリックする度に音声が強制的に最初まで巻き戻されて再生されるため、「こ、こ、こ、こ、こんにちは」が実現します。ただし、これだけだと、iPhone版で不具合が出ます。iPhone版の場合、音声ファイルを一度読み込んでいないとcurrentTimeを認識しないため、初回の巻き戻し処理時にエラーが発生してしまうのです…(多分)。

そのため、例えば、変数playCountというものを用意して、「初回だけは巻き戻し処理をしない」ように制御しましょう。これは、あくまでも方法の1つです。

<!-- クリックで音を鳴らすJavascriptプログラム -->
<script>
//再生が初回かを判定する変数
var playCount = 0;

function hello(){
	//音声ファイルを巻き戻す(初回[playCount=0]なら無視)
	if(playCount > 0){
		document.getElementById("hello-file").currentTime = 0;
	}

	//[ID:hello-file]の音声ファイルを再生[play()]する
	document.getElementById("hello-file").play();

	//再生したら[playCount]を1にする
	playCount = 1;
}
</script>

これでボタン連打での音声再生に対応し、かつ、iPhone版でも音声を再生することができますね！

時間帯などによって、再生する音声を変える方法

例えば、このブログの「あいさつボタン」は、朝なら「おはようございます」、夜なら「こんばんは」と、時間帯によって挨拶が変わります。その仕組みは単純で、出力するaudioタグを、PHPで次のように制御しています。

デモを見る

<?php
//現在の時間を[0〜24の数値]で変数[$h]に取得
$h = date('G');

//以下の音声ファイルを用意しておく
// おはよう		01.mp3、01.wav
// こんにちは	02.mp3、02.wav
// こんばんは	03.mp3、03.wav

//[$h]が5以上、12未満の場合 (「おはよう」のファイル)
if($h > 4 && 12 > $h){
	$file = '01';

//[$h]が12以上、18未満の場合 (「こんにちは」のファイル)
}elseif($h > 11 && 18 > $h){
	$file = '02';

//それ以外の場合 (「こんばんは」のファイル)
}else{
	$file = '03';
}

//[audioタグ]の出力 変数[$file]でファイル名を振り分け
echo "
<audio id=\"hello-file\" preload=\"auto\">
  <source src=\"./{$file}.mp3\" type=\"audio/mp3\">
  <source src=\"./{$file}.wav\" type=\"audio/wav\">
</audio>
";

これを応用することによって、例えば、アクセス数によって「媚び気味の挨拶にする(笑)」とか、大晦日なら「よいお年を」にするとか、様々なパターンを用意することができるはずです。

あいさつボタンを設置しよう！

ということで、「あいさつボタン」(クリックすると音が鳴るボタン)の設置方法を紹介しました。「テキストとか画像より、もっと自分をアピールしたいんだけど、実顔や動画はちょっと…」と思っている方に、「声だけ」というのはちょうどいいんじゃないでしょうか。声優さんのブログとかに設置したらファンも喜ぶと思います。興味を持った方はぜひ、お試し下さいね！

そして和田憲幸さん、ありがとうございました！

• Tweet

• 

この記事へのコメント

感想、ご指摘などお気軽にお寄せ下さい。「関連記事を書いた」という方はご報告いただければリンクします。

コメントを書き込む

• コメント
• ログイン

お名前 :

• Twitterでログイン(認証)する
• Facebookでログイン(認証)する
• はてなでログイン(認証)する

※Twitter、Facebook、はてな、いずれかのアカウントをお持ちの方は、本人認証(ログイン)を行なうことができます。
※本人認証をすることで、書き込みの待ち時間なし、画像アップロード、アイコンなどが利用できます。
※認証時にサービスと連携しますが、名前とアイコン以外の情報を読み込んだり、また書き込みを行なうことはありません。連携で要求する権限は「公開情報の読み取り」のみです。

コメントは、0件です。

記事の更新履歴

• 記事を公開しました。
  2014/07/11 18:30