1

HTMLページに画像があり、クリックすると効果音を鳴らしたいです。画像コードは次のとおりです。

<img src="images/button1.png" width="32" height="32" onclick="alert();">

アラート ボックスを、読み込んだ効果音に変更したいのですが、どうすればよいですか?

4

2 に答える 2

1

まあ、それはそれほど簡単ではありません、実際にはHTMLだけで達成することは困難です。詳細については、こちらをご覧ください。

次のようなさまざまな問題に直面します。

  • ブラウザが異なれば、オーディオ形式のサポートも異なります。
  • ブラウザがファイル形式をサポートしていない場合、プラグインがないとオーディオは再生されません。
  • プラグインがユーザーのコンピューターにインストールされていない場合、オーディオは再生されません。
  • ファイルを別の形式に変換しても、すべてのブラウザで再生されるわけではありません。

ハイパーリンクの使用

Webページにメディアファイルへのハイパーリンクが含まれている場合、ほとんどのブラウザは「ヘルパーアプリケーション」を使用してファイルを再生します。

次のコードフラグメントは、mp3ファイルへのリンクを示しています。ユーザーがリンクをクリックすると、ブラウザはファイルを再生するためのヘルパーアプリケーションを起動します。

<a href="horse.mp3">Play the sound</a>

私の意見による最善の解決策は、サウンドの再生にFlashを使用することです。つまり、リンクをFlashオブジェクト/ボタン/テキストとして作成し、AdobeFlash内でホバー/クリックなどでサウンドを割り当てます。

于 2012-09-28T06:52:01.457 に答える
0

SoundManagerを使用すると、多くの頭痛の種から解放されます。さらに、オーディオがブラウザでネイティブにサポートされていない場合は、うまくフラッシュにフォールバックします。

ただし、サードパーティのライブラリを中継したくない場合は、別の解決策があります。これは、少し困難で疲れますが、audio タグをサポートするすべてのブラウザーで機能します。最初に行う必要があるのは、オーディオ タグにソース コンテンツを入力することです。これは、次のコード行で実行できます。

<audio id = 'audio'>
  <source src="test.mp3" type="audio/mpeg" />
  <source src="test.ogg" type="audio/ogg" />

  <object class="playerpreview" type="application/x-shockwave-flash" 
          data="player_mp3_mini.swf" width="200" height="20">
    <param name="movie" value="player_mp3_mini.swf" />
    <param name="bgcolor" value="#085c68" />
    <param name="FlashVars" value="mp3=test.mp3" />
    <embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200" 
           height="20" name="movie" align="" 
           type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
    </embed>
  </object>

</audio>

サポートされているオーディオ形式に関して、異なるブラウザー ベンダー間で共通の合意がないため、サポートされている各形式を含める必要があります。1 つのブラウザがそれをサポートしていない場合、それをスキップして次のブラウザにフォールバックします。それらのいずれもサポートされていない場合は、フォールバックとしてフラッシュを使用できます。Google AJAX Libraries APIは、私たちの仕事の多くを容易にしてくれます。以下は完全なソースコードです。

<script src="http://www.google.com/jsapi"></script>
<script>google.load("swfobject", "2.2");</script>
<img src="http://www.kafkabrigade.org.uk/wp-content/uploads/2011/07/button-pic.jpg"  onclick="playSound();">

<div id="fallback"></div>
<audio id = 'audio'>
      <source src="http://www.hellopixel.net/click.mp3" type="audio/mpeg" />
      <source src="http://www.hellopixel.net/click.ogg" type="audio/ogg" />

      <object class="playerpreview" type="application/x-shockwave-flash" 
              data="player_mp3_mini.swf" width="200" height="20">
        <param name="movie" value="player_mp3_mini.swf" />
        <param name="bgcolor" value="#085c68" />
        <param name="FlashVars" value="mp3=test.mp3" />
        <embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200" 
               height="20" name="movie" align="" 
               type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
        </embed>
      </object>

    </audio>


<script>
    function playSound() {
        if (document.getElementById('audio').canPlayType) {
            if (!document.getElementById('audio').canPlayType('audio/mpeg')) {
                document.getElementById('audio').style.display = 'none';
                swfobject.embedSWF(
                "player_mp3_mini.swf", 
                "fallback", 
                "200", 
                "20", 
                "9.0.0", 
                "", 
                {"mp3":"http://www.hellopixel.net/click.mp3"}, 
                {"bgcolor":"#085c68"});                
            } else {
                document.getElementById('audio').play();
                document.getElementById('fallback').style.display = 'none';
            }
        }

    }
</script>​

フィドル: http://jsfiddle.net/SMR4V/

注: ogg ファイルを作成していないため、Firefox では動作しません。FF は ogg ファイルを使用しているためです。

于 2012-09-28T06:59:19.197 に答える