Audio in a tool tip/hover?

Question

I would like to include audio that will automatically play when the user scrolls over. I have not found a tooltip that will do this. Does anyone know of a way to accomplish this?

(Note: The user will be warned about the audio before they have access to the page.)

UPDATE

I got this working thanks to Bakudan - хан ювиги. But is there a flash fall back available using Bakudan - хан ювиги's method? Thanks!

UPDATE 2

Using Bakudan - хан ювиги's recommended method for adding a flash fallback using swfobject leaves me a bit confused. My lack of javascript knowledge is where I get lost. Here is the code I am using for my audio:

    <script>

// Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com)
// Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code

var html5_audiotypes={ //define list of audio file extensions
"mp3": "audio/mpeg",
"ogg": "audio/ogg",
}

function createsoundbite(sound){
var html5audio=document.createElement('audio')
if (html5audio.canPlayType){ //check support for HTML5 audio
    for (var i=0; i<arguments.length; i++){
        var sourceel=document.createElement('source')
        sourceel.setAttribute('src', arguments[i])
        if (arguments[i].match(/\.(\w+)$/i))
            sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
        html5audio.appendChild(sourceel)
    }
    html5audio.load()
    html5audio.playclip=function(){
        html5audio.pause()
        html5audio.currentTime=0
        html5audio.play()
    }
    return html5audio
}
else{
    return {playclip:function(){throw new Error(
      "Your browser doesn't support HTML5 audio unfortunately")}}
}
}

//Initialize sound clips with 1 fallback file each:

var mouseoversound=createsoundbite(
   "/messages4u/2011/images/october/laugh.ogg",      
  "/messages4u/2011/images/october/laugh.mp3")

</script>

I changed the else to the flash instead of the error message. How do I change this using swfobject to play the flash audio file? I am a bit lost by that.

Thanks for the help!

Answer 1

This is a good start. I`ve made a demo . If the audio is a little bit longer, add stopclip function to the createsoundbite function and then add it to the .mouseleave .

Edit:

To add flash change the else part. I'm very familiar with flash, but basically use one of the following:

• create object - "document.createElement("object");... etc"
• or which I think is better use swfobject

Answer 2

Here's a version that plays sound in older browsers and does not require flash:

var sound = document.createElement("audio");
if (!("src" in sound)) {
    sound = document.createElement("bgsound");
}
document.body.appendChild(sound);

function playSound(src) {
    sound.src = src;
    sound.play && sound.play();
}

...

playSound("/sounds/something.mp3");

Edit: Here's a version that uses .hover() to play the sound when the mouse hovers over your element:

$(function) {
    var sound = document.createElement("audio");
    if (!("src" in sound)) {
        sound = document.createElement("bgsound");
    }
    document.body.appendChild(sound);

    $(".playable").hover(function() {
        sound.src = this.soundFile;
        sound.play && sound.play();
    }, function() {
        sound.src = "";
    });
});

Set up your elements that you want to play a sound with a class of "playable" and custom attribute "soundFile" containing the source url for the sound file:

<span class="playable" soundFile="/sounds/something.mp3">Something</span>
<span class="playable" soundFile="/sounds/somethingElse.mp3">Something else</span>

Answer 3

soundmanager2