2

I have a design for a page that uses 3 types of audio and video:

  1. a few videos.
  2. a audio sound that triggers onclick.
  3. a audio loop that plays in the background, which the option to turn off.

MeidaElement.js looks just perfect for the videos, to get them all playing cross browser with the minimum of fuss.

It also seems to play audio well also. I'm just not sure if I can trigger a bit audio from a jQuery - i.e. just clicking on any old div. And if so, can I preload the audio so the sound happens immediately on click.

Thanks in advance for any pointers.

2 Answers 2

1

This jQuery function seemed to work for me:

$('.button').click(function(){
    $('audio')[0].player.play();
});
4
  • $('audio')[0].play(); works also. Not sure what the [0] is for.
    – Jim Hyland
    Jul 2, 2012 at 16:28
  • Correction: You need the .player as well in order to work in ff.
    – Jim Hyland
    Jul 5, 2012 at 22:17
  • Another correction: Looks like you need to omit the .player in order for the audio to work on iOS. What's going on!
    – Jim Hyland
    Jul 13, 2012 at 21:10
  • +1 - I was looking and this is the only play I found a solution, thanks. I can confirm that it does not work in iOS.
    – L84
    Sep 19, 2012 at 7:43
0

You should be able to bind this to a div the same way you bind anything else to a div in jQuery. The samples at http://mediaelementjs.com/#installation will give you a good start for the method of creating your audio player. Specifically,

<script>
// JavaScript object for later use
var player = new MediaElementPlayer('#player',/* Options */);
// ... more code ...
player.pause();
player.setSrc('mynewfile.mp4');
// I'm removing the following play call so we can do it elsewhere
//player.play();
</script>

In the above, I removed the call to play() so I can bind it somewhere else. In jQuery, I think that should look like the following:

$('#divWhatever').on('click', function() { $('#player').play() } )

Please test this and report success or what failures you encounter. Regardless, the on function is what you are looking for in jQuery: http://api.jquery.com/on/

0

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.