What you need:
– Basic knowledge in HTML and CSS.
– A Mac and Xcode (no programming skills required) for exporting the app.

Audio

Audio is implemented with the help of the free jquery audioplayer “jplayer”. The player is displayed in form of a clickable box, which stretches automatically to the width’s column. For more information about jplayer, visit http://www.jplayer.org.

This module consists of two parts:

Part 1 – Set the path to your audio files with Javascript and a unique player id

If you have multiple audioplayers on one page, you need to set “cssSelectorAncestor” and define a unique name for each audioplayer.

Notice: There must be a “#” at the beginning.
…
$(document).ready(function(){
	$("#funky-music").jPlayer({
		ready: function () {
			$(this).jPlayer("setMedia", {
			//Set the Path to your Audio files. Firefox won’t play mp3’s so you also must provide an ogg-version
			mp3: "sounds/yourAudioFile.mp3",
			oga: "sounds/yourAudioFile.ogg",		});
	…
	cssSelectorAncestor: "#jp_interface"
	…

Part 2 – The HTML markup

Mobile Safari on iOS devices won’t read the total duration of the audio file if not played once, so we have to provide it manually (I know it’s dirty. If anyone got a better idea, please drop a line at the comments below. Thanks!). The elements you have to edit:

The id must match the id specified under “cssSelectorAncestor” (without the “#”).
<div id="jp_interface" class="jp-interface">

Next, insert some text and the duration of the audio file. The content of “sound-box-active” is displayed, when the sound is actually playing. If you want to style the sound-box yourself, have a look at the “soundbox.css” stylesheet.

<div class="sound-box">
        <p>Play some funky music.</p>
        <span class="jp-current-time"></span> <span>/</span> <span class="jp-duration-inactive">01:39</span>
</div><!--Div sound-box-->

<div class="sound-box-active">
        <p>Play some funky music.</p>
        <span class="jp-current-time"></span> <span>/</span><span class="jp-duration"></span>
</div><!--Div sound-box-->

That’s basically it! Here’s the whole markup in a “small-column”:

<!-- Javascript-Configuration for Audioplayer -->
<script type="text/javascript">
$(document).ready(function(){
	$("#funky-music").jPlayer({
		ready: function () {
			$(this).jPlayer("setMedia", {
			mp3: "sounds/time-to-go.mp3",
			oga: "sounds/time-to-go.ogg",
		});
		},
		ended: function (event) {
		},
		swfPath: "js",
		supplied: "mp3,oga",
		backgroundColor: "transparent",
		cssSelectorAncestor: "#jp_interface"
	})
	.bind($.jPlayer.event.play, function() { // Using a jPlayer event to avoid both jPlayers playing together.
	$(this).jPlayer("pauseOthers");
	});
});
</script>

<div class="small-column float-right">

<!--Audioplayer-->
<div id="funky-music" class="jp-jplayer"></div>
        <div class="jp-audio">
			<div class="jp-type-single">
				<div id="jp_interface" class="jp-interface">

					<div class="jp-controls">
						<a href="#" class="jp-play" tabindex="1">
                        				<div class="sound-box">
                       						<p>Play some funky music.</p>
							<span class="jp-current-time"></span> <span>/</span> <span class="jp-duration-inactive">01:39</span>
                           				 </div><!--Div sound-box-->
                       				 </a>

                        			<a href="#" class="jp-pause" tabindex="1">
                            				<div class="sound-box-active">
                             				   <p>Play some funky music.</p>
                              				  <span class="jp-current-time"></span> <span>/</span><span class="jp-duration"></span>
                            				</div><!--Div sound-box-->
                       				</a>
					</div><!--Div jp-controls-->

			</div><!--Div jp-interface-->
	</div><!--Div jp-type-single-->
</div><!--Div jp-audio-->
<!-- Audio End-->

</div><!--small-column float-right-->

Laker is now on github! Please discuss issues, suggestions or tipps in the github forums of Laker. Thanks! ;)

14 Responses to “Audio”

  1. Hi,

    Thanks so much for Laker. I’m halfway through my first app using Laker. I’m doing a language tutor, so I need multiple audio players in one dossier. Can you share a specific example on how to do this?

    Thanks

  2. hi
    can i use another audio player like speakker ….

    thanx

  3. How do I make the audio auto play when the page loads?

  4. how do i put multiple jplayers each with a different mp3 file?

    do i use multiple cssSelectorAncestor: “#jp_interface” ?
    or multiple sections?
    and / or multiple sections?

  5. just figured it out.

    copy the bit from $(“#funky-music”).jPlayer({
    up to the }) before the .bind
    change the copy to $(“#funky-music2″).jPlayer({
    change cssSelectorAncestor to jp_interface_2
    copy entire Audioplayer section in the body
    change

  6. you need multiple ancestors, e.g. #jp_interface_2, #jp_interface_3

  7. ah, just answered you… ;) Please keep me updated about your project.

  8. Will definitely let you know when i release my first app. Thanks for incredible framework :)

  9. Just saw the note on copyright and app submissions – is that still the case?

  10. How do I avoid both tracks (I’m currently trying to have 2 per page) from playing simultaneously when starting the first player?

  11. Have you had any success with streaming audio through jplayer to help keep the overall app file size down?
    Thanks
    -Freddy-Fred

  12. Sure, external streaming should work, doesn’t it?

  13. Hi florian

    I applied your audio code in index page to make a background through all the pages.

    The code seem workable but the audio will stop after I swipe a few page.
    Do you have idea about this?

  14. i tried to use the jplayer to play audio in my html page,

    i’ve include soundbox.css , jplayer.min.js , and the jquery 1.5.min.js
    and also the markup script from http://cid2556r1571.hs10.hosting.punkt.de/www.lakercompendium.com/how-to-use/modules/audio/ in my html page –>

    the player doesn’t seemed to work in safari, IOS simulator, and firefox?
    did i miss something to be included?

Leave a comment, suggestion or question.

You must be logged in to post a comment.