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);
        }
    });


});