play sound with text fadein

Question

What is the best way to play a short bell sound every time the texts in my below code fade in?

I read that jplayer is perhaps the best option?

I have tried jquery.sound but in Firefox it causes the "install plugin" box to appear infinitely if there is no Quicktime installed.

$(function(){
  $(window).mousemove(function(){
    runIt();
  });
  runIt();      
})

function runIt() {
  var it = $('#myText');
  it.stop(true,true).clearQueue().fadeOut(1).animate({left:0},500).queue(function(){
    it.html('Start Again');
    it.dequeue();
  })
  it.fadeIn(500).animate({left:0},5000).fadeOut(1000).queue(function(){
    it.html('test 1');
    it.dequeue();
  })
  it.fadeIn(1000).animate({left:0},5000).fadeOut(1000).queue(function(){
    it.html('test 2');
    it.dequeue();
  })
  it.fadeIn(1000).animate({left:0},5000).fadeOut(1000).queue(function(){
    it.html('test 3');
    $(window).unbind('mousemove');
    it.dequeue();
  })
  it.fadeIn(1000);
}

Answer 1

Welcome to Stack Overflow!

Well, to begin with; that code looks really inefficient. Not really sure what you are doing with this since it was taken out of context, so would be nice if you could show us as a little more.

Anyway, to try and answer your question HTML5 has native support for audio playback but maybe you need a solution that's more cross-browser friendly?

With HTML5 you only have to do this:

var sample = new Audio("file.mp3");
sample.play();

Personally I wouldn't go with any other solution and leave it silent if the browser doesn't support HTML5 audio.

Edit: I read the code a bit closer and realized you are clearing/stopping the queue at places. Not sure about triggering it on every little move of the mouse though :)

Edit 2: I took the liberty to play around a bit with your code and jPlayer (which uses HTML5 audio if possible) and ended up with this:

$(function() {

    var element = $('#myText'),
        jPlayer = $("#jPlayer").jPlayer({
            ready: function() {
                $(this).jPlayer("setMedia", {
                    wav: "http://www.ibiblio.org/pub/multimedia/pc-sounds/ding.wav"
                });
            },
            supplied: "wav"
        });

    function jPlay() {   
        jPlayer.jPlayer("stop").jPlayer("playHead", 0).jPlayer("play");
    }

    function runIt() {
        element
            .stop(true, true)
            .clearQueue()
            .fadeOut(1)
            .animate({
                left: 0
            }, 500)
            .queue(function() {
                jPlay();
                element
                    .html('Start Again')
                    .dequeue();
            })
            .fadeIn(500)
            .animate({
                left: 0
            }, 5000)
            .fadeOut(1000)
            .queue(function() {
                jPlay();
                element
                    .html('test 1')
                    .dequeue();
            })
            .fadeIn(1000)
            .animate({
                left: 0
            }, 5000)
            .fadeOut(1000).queue(function() {
                jPlay();
                element
                    .html('test 2')
                    .dequeue();
            })
            .fadeIn(1000)
            .animate({
                left: 0
            }, 5000)
            .fadeOut(1000)
            .queue(function() {
                jPlay();
                $(window).unbind('mousemove');
                element
                    .html('test 3')
                    .dequeue();
            })
            .fadeIn(1000);
    }
    $(window).mousemove(function() {
        //runIt();
    });
    runIt();
});

You can try this out at jsFiddle