0

Here is the new code. Still no sound.

This in the external js file function playSound(color) { var mySound = new buzz.sound( "/sounds/"+color, { formats: [ "ogg", "mp3", "acc" ] });

                    mySound.play()

And this in the head:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>

<script type="text/javascript" src="/sounds/buzz.js">
</script>

<script type="text/javascript" src="sound.js">
</script>

<script type="text/javascript" src="hoverBubbles.js">
</script>

I have programmed my site so that a sound plays when the user clicks on an image. I did this with JS. But there is a problem. There is a long delay of about 5 seconds before the sound plays that is after you click on the image. What can I do to make the sound play without delay? Also as I was trying to solve the above problem I did something (I don't know what it is ) and I can't play the sound at all now.

Any ideas?

function playSound(color) {
    $("#wavLoader").html("<embed src='/sounds/" + color + ".wav' hidden=true starttime='00:00' autostart=true loop=false>");
    }); 

}

<title>Colors</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>

<script type="text/javascript" src="hoverBubbles.js"></script>

<script type="text/javascript" src="sound.js"></script>

<link rel="stylesheet" type="text/css" href="heading.css">

<link rel="stylesheet" type="text/css" href="fish.css">

<link rel="stylesheet" type="text/css" href="fishText.css">

<link rel="stylesheet" type="text/css" href="fishBubbles.css">

<style type='text/css'>


</style>

$(document).ready(function() {

            $('#fishBlack').mouseover(function() {
                $('#bubblesBlack').toggle('slow');
                $('#textBlack').toggle('slow');
            });

            $('#fishBlack').mouseout(function() {
                $('#bubblesBlack').hide('slow');
                $('#textBlack').toggle('slow');
            });
}

$(document).ready(function() {

            $('#fishBlack').click(function() {
                    playSound('black');
            });

}       
<!--the sound-->    

<span id="wavLoader" style="position:fixed; top:-100px;"></span>
7
  • Where is playSound() defined? It appears that it's not.
    – James Hill
    Nov 29, 2011 at 13:15
  • 2
    The only relevant code is most likely in your sound.js... The question cannot really be answered in its current form
    – Esailija
    Nov 29, 2011 at 13:16
  • Apart from that the 5 second delay is probably caused by loading the audio file. How big are the files and how are you trying to play them (which is what James is asking as well)?
    – mensch
    Nov 29, 2011 at 13:17
  • Have you checked your console? The code has at least 3 syntax errors, extra }); in playSound..., missing }); after both document ready calls...
    – Esailija
    Nov 29, 2011 at 13:23
  • playSound() is there but didn't copy well in my question. sory about that.
    – L1900
    Nov 29, 2011 at 13:26

2 Answers 2

1

I'd suggest using an existing library like Buzz, which in it's own words:

Buzz is a small but powerful Javascript library that allows you to easily take advantage of the new HTML5 audio element. It degrades gracefully on non-modern browsers.

API example:

var mySound = new buzz.sound( "/sounds/myfile", {
    formats: [ "ogg", "mp3", "acc" ]
});

mySound.play()
    .fadeIn()
    .loop()
    .bind( "timeupdate", function() {
       var timer = buzz.toTimer( this.getTime() );
       document.getElementById( "timer" ).innerHTML = timer;
    });

Working example: jsFiddle

6
  • 1
    Please pretty please do not use innerHTML to set text. pastie.org/2938683
    – Zirak
    Nov 29, 2011 at 13:55
  • One should get shot for every time one abuses .innerHTML as a cross browser .textContent
    – Raynos
    Nov 29, 2011 at 14:00
  • I have edited my question with the new code. I am still needing help!
    – L1900
    Nov 29, 2011 at 22:36
  • If you're using Buzz, you'll need to update your playSound() function to the following: function playSound(color) { var sound = new sound('/sounds/' + color + '.wav'); sound.play(); } Nov 30, 2011 at 10:47
  • still not working. I tried new sound and new buzz.sound in the above code by Peter. Do you think it is the buzz.js that I downloaded from their site. When I downloaded it it was in a zip file. When I opened the zip there were three files/items. I only downloaded the first one that said buzz.js onto my server then I referenced it in my index file as shown in my question. Do you think the problem is in this issue.
    – L1900
    Nov 30, 2011 at 16:04
0

Your script is returning an embed tag which in turn calls the default player installed on the user's system for that type of media (likely some flavour of Windows Media Player, QuickTime, etc.). Loading the player takes some time, depending on the speed of the client-side machine and (probably) the amount many players are already open on the page.

You'll likely want to implement some form of pre-buffering or use a third-party library like the one mentioned by Peter. Or this one, which provides a Flash fallback, should the browser not support HTML5.

Using a JavaScript framework like jQuery, there are some more readymade plugins, jPlayer, for example.

5
  • function playSound(color) { var mySound = new buzz.sound( "/sounds"+color, { formats: [ "ogg", "mp3", "acc" ] }); mySound.play()
    – L1900
    Nov 29, 2011 at 16:39
  • I did upload the buzz.js file on my server too.
    – L1900
    Nov 29, 2011 at 16:40
  • It's better to update you question with new code reflecting the changes you've made. Also, have you checked the output of your script with a JavaScript debugger like Firebug for Firefox? Are there any messages printed on the console?
    – mensch
    Nov 29, 2011 at 16:42
  • Try: function playSound(color) { var mySound = new buzz.sound( "/sounds/"+color, { formats: [ "ogg", "mp3", "acc" ] }); mySound.play() You had a missing / in your path Nov 29, 2011 at 17:15
  • I have edited my question with the new code. I am still needing help!
    – L1900
    Nov 29, 2011 at 22:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.