22

I'm trying to get jQuery to play a sound on element hover/click. (It's like a flash website without flash)

I've tried the methods recommended in Cross-platform, cross-browser way to play sound from Javascript?, the jQuery Sound plugin and a couple of other tutorials without any success. I'm assuming this is because they haven't been updated since 2008.

Does anyone have any recommendations?

Community
  • 1
  • 1
Erin
  • 558
  • 1
  • 4
  • 12
  • 2
    You can find the jQuery sound plug in at http://dev.jquery.com/browser/trunk/plugins/sound/jquery.sound.js – Erin May 04 '10 at 21:24
  • 1
    Could you use this jQuery sound plugin (http://www.happyworm.com/jquery/jplayer/)? – Mottie May 05 '10 at 03:46
  • I glanced at it, but thought that it was a bit too heavy for what I wanted. I'll give it a second look. Thanks! – Erin May 05 '10 at 15:41
  • 1
    Have you tried http://www.schillmania.com/projects/soundmanager2/ ? You could try inserting its play command in a jquery hover function – Adam May 05 '10 at 16:09
  • try: jQuery('#resource_audio').attr("src",srclink)[0].play(); found from: http://css-tricks.com/play-sound-on-hover/ – ShaunOReilly Aug 03 '12 at 01:07

5 Answers5

33

Don't need any of those. The HTML tag, combined with JavaScript, will do the trick.

<audio id="soundHandle" style="display: none;"></audio>
<script>
  soundHandle = document.getElementById('soundHandle');
  soundHandle.src = '/blah/blah.mp3';
  soundHandle.play();
</script>
Delan Azabani
  • 79,602
  • 28
  • 170
  • 210
  • That's a short bit of code. I'm more comfortable with jQuery, but how would I use java to attach this to a mouse over event? – Erin May 06 '10 at 20:16
  • 11
    @Erin: Javascript != Java, and this is pure Javascript. Note, however, that this is not cross-browser at all as it uses the HTML5 ` – Max Shawabkeh May 07 '10 at 01:36
  • 4
    Why is this downvoted? This **should** be the way to go. Yes, it's not cross-browser (yet), but it will be pretty soon and **it is the standard**. Actually, the only browser **not** currently supporting it is Internet Explorer. Source: http://caniuse.com/#feat=audio – Felix May 07 '10 at 17:25
  • 2
    No, there are more browsers that do not support it, especially in the mobile sector. Plus the question emphasizes cross-browser and cross-platform compatibility. When the solution works for less then 50% of the market it doesn't satisfy this requirement. – Jakub Hampl May 07 '10 at 17:34
  • And you think more mobile devices support Flash than ` – Felix May 07 '10 at 18:24
  • No but IE does not support it. iPhones do support the tag, but not in a reasonably scriptable manner (they will play the sound on a dedicated screen) thus again useless for this purpose. The truth is that sound (as in a user-interface element, not playing an mp3 song) is currently out of today's cross-browser compatible techniques. Also the percentage doesn't have to be 50% to not be cross-browser compliant, you should be aiming for something like 5%. – Jakub Hampl May 08 '10 at 00:55
  • 1
    Please note that this uses only one channel, which means that one sound can be played at the same time. See http://www.storiesinflight.com/html5/audio.html for a multichannel version – TiansHUo Jan 21 '11 at 08:22
  • 1
    I don't know why, when I was trying to implement this, I could not get this to work till I added `soundHandle.load();` What's missing? – Damon Aw Feb 28 '12 at 11:03
  • I had to use an .ogg file to get it to play on firefox – CommentLuv Dec 07 '12 at 21:40
6

Actually it's impossible to do in a truly cross-browser compliant way as for example iPhones will play sound only on a dedicated player "page". However some of the plugins in the other answers should do the job for most (desktop) browsers.

Delan Azabani
  • 79,602
  • 28
  • 170
  • 210
Jakub Hampl
  • 39,863
  • 10
  • 77
  • 106
5

Audio tag did not work for me in some browsers so this is how I got it done:

function playBuzzer(){
        $("body").append("<embed src='/web/sounds/Buzz.mp3' autostart='true' loop='false' width='2' height='0'></embed>");
}

Whenever I want to play sound (onmouseover, onclick, onload...) I call this function.

ThinkFloyd
  • 4,981
  • 6
  • 36
  • 56
2

try this: http://swaggplayer.no.de/demos it using the flash to play a sound or this one http://www.schillmania.com/projects/soundmanager2/

Delan Azabani
  • 79,602
  • 28
  • 170
  • 210
FDisk
  • 8,493
  • 2
  • 47
  • 52
0

http://codecanyon.net/item/fancy-music-player-v20-jquery-plugin/498071?ref=1stwebdesigner

Player works like this - first it detects if Flash Player 9 or higher is installed. If yes a hidden flash movie(swf) will be used, that communicates via javascript with the HTML user interface. If no Flash Player is installed, the new HTML5 audio engine will be used, which is supported by all iToys(iPhone, iPad etc.).

FDisk
  • 8,493
  • 2
  • 47
  • 52