とあるお客様からの相談で、「(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>
この例では画像ではないけど。