-2

I have a sound file that I would like him to be heard only if a certain image on my page is loaded.

how can I manage that?

what do I need to add to document ready?

jimmy who
  • 35
  • 1
  • 6
  • @Jack Why? jQuery + HTML5 = Winning combination. Let's kick flash from web dev – Roko C. Buljan Dec 20 '12 at 14:37
  • Really, flash? With all of the html5 goodness available and Adobe dropping support for mobile? – jrummell Dec 20 '12 at 14:37
  • See [Play Sound Javascript/Jquery](http://stackoverflow.com/questions/3421424/play-sound-javascript-jquery?rq=1) and [Jquery check if image is loaded](http://stackoverflow.com/questions/6069126/jquery-check-if-image-is-loaded?rq=1). – jrummell Dec 20 '12 at 14:38
  • possible duplicate of [jQuery callback on image load (even when the image is cached)](http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached) – Blazemonger Dec 20 '12 at 14:40
  • 2
    @roXon: except that jQuery+HTML5 still isn't close to what flash can do. It's slow (dom manipulation and such), it's buggy, it's near impossible to get anything significantly complex to run the same in every browser, basic tools are *just* coming out for making actual applications, standards are so far off (from being standardized and adopted) that it's a crapshoot if something will even work, yet alone work right. Yes, flash is dead. It may be dieing, but there's still a lot that you can't do well in HTML5 that is borderline trivial in flash... Not saying not to prefer JS, but boo to FUD... – ircmaxell Dec 20 '12 at 14:58
  • Open this link it will solve http://stackoverflow.com/questions/15483455/play-sound-when-message-received – Azam Alvi Mar 19 '13 at 13:09

2 Answers2

3

Include the ImagesLoaded() plugin.

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();
});
Tim S.
  • 12,449
  • 7
  • 41
  • 68
  • This is not good solution according to answer from here: http://stackoverflow.com/questions/910727/jquery-event-for-images-loaded. If image is loaded from cache there is a chance that event won't start. – Rob Dec 20 '12 at 14:39
  • 1
    Based on your comments I changed the `load()` event to `imagesLoaded()`, a jQuery plugin used to create event handlers when an image is loaded. – Tim S. Dec 20 '12 at 14:43
  • what should I put here: img#my_image , my image name is greenbell.png, so :img#greenbell.png - what should I put insted img# – jimmy who Dec 20 '12 at 14:45
  • Add to your '' ID attribute named- my_image – Rob Dec 20 '12 at 14:47
  • @jimmywho `` – Tim S. Dec 21 '12 at 15:47
0

jsBin demo

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

Or better: JsBin demo

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


});
Roko C. Buljan
  • 164,703
  • 32
  • 260
  • 278