月別アーカイブ
検索

とあるお客様からの相談で、「(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>

この例では画像ではないけど。

関係ありそうな記事

コメント