CODEWITHSUNDEEP
javascript
L1900
L1900

Reputation: 147

can't play sound in JS

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>

Upvotes: 1

Views: 3695

Answers (2)

Peter Bridger
Peter Bridger

Reputation: 9323

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

Upvotes: 1

mensch
mensch

Reputation: 4411

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.

Upvotes: 0

Related Questions