I recently came across a need to have audio on a Visualforce pages. While embedding a flash based audio would be easy enough to do, it would not solve the purpose as flash is not universal and compatible across. I started off with HTML5 audio tag.
<audio> tag makes the life of a developer easy. I tested in Firefox, Chrome and Safari and it was working grand. Now comes the bummer IE9. Even though it is written everywhere that IE9 supports audio tag, there is a catch. IE9 supports only the events of Audio tag but no direct support as other browsers provide. Moreover the older version of IE (IE8 and IE7) do not support so in a way there is no way you can use audio tag yet considering IE is still one the most users browsers in the market.
Other than the standard browser support, the VF page also had to work on mobile platforms. jPlayer is on of the most widely used jQuery plugin that addresses this very issue of compatiblity at the same time providing a very nice UI elements to manipulate
Here is the visual force example of using jPlayer plugin with jQuery to make the pages audio enabled. jPlayer provides nice documentation for events and properties of the plugin
<audio> tag makes the life of a developer easy. I tested in Firefox, Chrome and Safari and it was working grand. Now comes the bummer IE9. Even though it is written everywhere that IE9 supports audio tag, there is a catch. IE9 supports only the events of Audio tag but no direct support as other browsers provide. Moreover the older version of IE (IE8 and IE7) do not support so in a way there is no way you can use audio tag yet considering IE is still one the most users browsers in the market.
Other than the standard browser support, the VF page also had to work on mobile platforms. jPlayer is on of the most widely used jQuery plugin that addresses this very issue of compatiblity at the same time providing a very nice UI elements to manipulate
Here is the visual force example of using jPlayer plugin with jQuery to make the pages audio enabled. jPlayer provides nice documentation for events and properties of the plugin
1: <!DOCTYPE html>
2: <apex:page showHeader="false" standardStylesheets="false" >
3: <head>
4: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
5: <apex:includeScript value="{!$Resource.jQuery14}" />
6: <apex:includeScript value="{!URLFOR($Resource.jPlayer,'jPlayer/js/jquery.jplayer.min.js')}"></apex:includeScript>
7: <apex:stylesheet value="{!URLFOR($Resource.jPlayer,'jPlayer/skin/blue.monday/jplayer.blue.monday.css')}"></apex:stylesheet>
8: <script type="text/javascript">
9: $(document).ready(function(){
10: alert(this.internal.flash.id);
11: $("#jquery_jplayer_1").jPlayer({
12: ready: function () {
13: $(this).jPlayer("setMedia", {
14: mp3:"{!$Resource.Q00000001mp3}",
15: oga:"{!$Resource.Q00000001ogg}"
16: }).jPlayer("play");
17: },
18: swfPath: "{!URLFOR($Resource.jPlayer,'jPlayer/js')}",
19: supplied: "mp3, oga",
20: solution: "flash, html",
21: wmode: "window"
22: });
23: });
24: </script>
25: </head>
26: <body>
27: <div id="jquery_jplayer_1" class="jp-jplayer"></div>
28: <div id="jp_container_1" class="jp-audio">
29: <div class="jp-type-single">
30: <div class="jp-gui jp-interface">
31: <ul class="jp-controls">
32: <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
33: <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
34: <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
35: <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
36: <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
37: <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
38: </ul>
39: <div class="jp-progress">
40: <div class="jp-seek-bar">
41: <div class="jp-play-bar"></div>
42: </div>
43: </div>
44: <div class="jp-volume-bar">
45: <div class="jp-volume-bar-value"></div>
46: </div>
47: <div class="jp-time-holder">
48: <div class="jp-current-time"></div>
49: <div class="jp-duration"></div>
50: <ul class="jp-toggles">
51: <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
52: <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
53: </ul>
54: </div>
55: </div>
56: <div class="jp-title">
57: <ul>
58: <li>Cro Magnon Man</li>
59: </ul>
60: </div>
61: <div class="jp-no-solution">
62: <span>Update Required</span>
63: To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
64: </div>
65: </div>
66: </div>
67: </body>
68: </apex:page>
