jquery - 特定の画像がロードされた場合に音を鳴らす

Question

私のページの特定の画像がロードされた場合にのみ彼の声が聞こえるようにしたいサウンドファイルがあります。

どうすればそれを管理できますか？

ドキュメント準備完了に何を追加する必要がありますか?

Answer 1

ImagesLoaded()プラグインを含めます。

HTML

<audio id="my_sound">
  <source src="horse.mp3" type="audio/mpeg">
  <source src="horse.ogg" type="audio/ogg">

  Your browser does not support this audio format.
</audio>

jQuery

var audio = document.getElementById('my_sound');

$('img#my_image').imagesLoaded(function(e) {
    audio.play();
});

Answer 2

jsBinデモ

HTML：

<img class="alertSound" src="img.jpg" /> 


<audio id="imgLoadedSound" src="loaded.ogg">
  Your browser does not support the <code>audio</code> element.
</audio>

JS：

$('img.alertSound').load(function(){
     $('#imgLoadedSound').get(0).play();
});

以上： JsBinデモ

$(function() {

    function imgIsLoaded() {

      var audio = new Audio('loaded.ogg');
      var img = new Image().src = this;
      img.onload = function(){
        audio.play();
      };

    }

    $('img.alertSound').each(function() {
        if( this.complete ) {
            imgIsLoaded.call( this );
        } else {
            $(this).one('load', imgIsLoaded);
        }
    });


});