とあるお客様からの相談で、「（Webサイトの）画像をクリックしたら、声が流れるようにしたいけど、できるものですかね？」という案件をいただいていました。
その当時は、私たちとは別の業者さんがサイト管理をされていたので、あまり深入りせずに「できますよ。今は私がサイトを触るわけにはいかないので、声の録音方法と、業者さんに送る方法を教えますね」程度の対応に留めておきました。
確かに要求事項はクリアしているけど・・・
数日後、件のお客様から「お陰さまでできました」と連絡があり、そのページを見せてもらいました。
殺風景なプレイヤー
画像をクリックすると、別ページに遷移して殺風景なプレイヤーが表示されて声が流れ始めました。ファイルのダウンロード速度もやや気になる。
参考のためにコードを見てみると、お客さんが送ったwavファイルに a タグでリンクを張っているだけでした。HTML5対応のブラウザならば内蔵プレイヤーで、そうでなければプラグインのプレイヤーで再生されるわけです。
うーん、確かに「画像をクリックしたら声が流れる」という要求はクリアしているし、お客さんも文句はないみたいだけど・・・。本当にこれでいいのか？
今回の要求の意図しているところって、「見ている人が画像（サイト主の顔のイラスト）をクリックしてみたら、声が出てきてびっくり」みたいな遊び心＆いたずら心なんじゃないかと思うのですよ。少なくとも、私はそう受け取りました。
それが、ページは遷移しちゃう（声の主のイラストが見えなくなる）わ戻るボタンを押さなきゃいけないわでは、仕掛けの魅力が半減ですよ。
私ならこう作る
というわけで、私ならばページ遷移せずに声を流すようにします。
JavaScript で Audio オブジェクトが使えればそれを、使えなければそれなりのHTMLタグを使えばできるはず。あと、wavファイルのままでは大きすぎるので、MP3にでも変換しておこう。
と、考えて作ってみたら一つ問題が。
FireFox がMP3形式 に対応していない。調べてみると ogg 形式とやらに対応しているとのこと。この ogg ファイル、今回はじめて知りました。
音声ファイルを mp3 と ogg の二種類用意する必要はありますが、とりあえずはできましたよ。
実装例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.6.2");
</script>
<script language="javascript" type="text/javascript">
$(function(){
// クリック
$('a#click1').click(function(){
audioObj1.play();
});
$('a#click2').click(function(){
audioObj2.play();
});
});
var MyAudio = function (src){
try {
this.audio = new Audio(src);
}
catch(e) {
this.audio = null;
this.src = src;
}
this.play = function() {
if(this.audio){
this.audio.play();
} else {
if(jQuery.browser.msie ){
$('bgsound').remove();
$('body').append('<bgsound src="' + this.src + '" />');
} else {
$('embed').remove();
$('body').append('<embed src="' + this.src + '" type="application/x-mplayer2" autostart="true" width="0" height="0" nojava="true" />');
}
}
};
};
var mediaExt;
if(jQuery.browser.mozilla) {
mediaExt = ".ogg";
} else {
mediaExt = ".mp3";
}
var audioObj1 = new MyAudio("./01" + mediaExt );
var audioObj2 = new MyAudio("./02" + mediaExt );
</script>
</head>
<body>
<p><a href="javascript:void(0);" id="click1">クリック1</a></p>
<p><a href="javascript:void(0);" id="click2">クリック2</a></p>
</body>
</html>
この例では画像ではないけど。
