Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old May 8, 2013, 02:13 PM   #1
benwiggy
macrumors 68020
 
Join Date: Jun 2012
Audio files within web page

I want to have a webpage with several audio files, each of which can be selected to play with a little (32 x 16) controller.

I've tried <embed>, which works well on Safari in OS X, but when I view the page in FireFox or IE on Windows, the controller isn't big enough to show the controls, and it tries either to play all the files at once, or ask the user if he wants to download each of files in turn.

Is there another way?
__________________
2012 MacMini, 2.6GHz i7, 16Gb RAM, Fusion Drive | 2012 MacBook Pro, 16Gb RAM, 480 Gb SSD |
2009 MacBook | 2006 iMac | 2003 G3 iBook | Beige G3 | PowerMac 7600 | Mac IIsi |
benwiggy is offline   0 Reply With Quote
Old May 8, 2013, 10:47 PM   #2
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
Stick to HTML5 apps if possible, stay away from Flash due to lack of mobile support and plugin madness.

As to cool HTML5 audio apps of all kinds which are popular, here's some to consider:

http://www.catswhocode.com/blog/10-a...-audio-players

I saw a few on there that seems to fit your needs, the rest is just a matter of styling. Otherwise use Google to search for "html5 audio player" if advice given by me or others is insufficient. Cheers.
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old May 9, 2013, 05:41 AM   #3
benwiggy
Thread Starter
macrumors 68020
 
Join Date: Jun 2012
Wow. I can't believe that something so obvious and ubiquitous requires such a lot of coded extras.

jPlayer looks promising, but the documentation of what you're supposed to do with it all is frightening.

I've done coding and scripting, but for some reason, I just cannot get my head round JavaScript (and PHP/TPL) on the web.
__________________
2012 MacMini, 2.6GHz i7, 16Gb RAM, Fusion Drive | 2012 MacBook Pro, 16Gb RAM, 480 Gb SSD |
2009 MacBook | 2006 iMac | 2003 G3 iBook | Beige G3 | PowerMac 7600 | Mac IIsi |
benwiggy is offline   0 Reply With Quote
Old May 9, 2013, 11:05 AM   #4
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
No problem, read this link carefully as it outlines how to accomplish playing multiple audio files, i.e. MP3's, using HTML5:

http://www.w3schools.com/html/html5_audio.asp

It's very easy, pay attention to supported browsers in the bottom so you know what the limitations are. For a more advanced implementation that uses Javascript to extend the basic HTML5 functionality:

http://blogs.msdn.com/b/ie/archive/2...-audio-gt.aspx

My earlier advice still stands - not all the "fancy" apps on the page I sent you are complex to setup nor do all require PHP, but all require configuration and basic knowledge of Javascript and CSS styling. They met your requirements as stated here, it all depends on how fancy an interface you want -- please note when someone posts specifying multiple file player with specific size, etc., the advice will include existing apps to save you development time or recreating the wheel. Did not intend to scare you or mislead you.

If you want something more advanced than the basic HTML5 method I linked above then you will need to set some time aside to learn the basics. Plenty of topics on here about that.
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old May 9, 2013, 11:06 AM   #5
WesCole
macrumors 6502a
 
Join Date: Jul 2010
Location: Texas
Here is something you could try (not sure if it is what you want, though):

Code:
<audio controls="controls"> 
<source src="song path" type="audio/ogg"> 
<source src="song path" type="audio/mp3"> 
Your browser does not support the audio element.
</audio>
__________________
2010 15" MacBook Pro, Anti-Glare Hi-Res, 2.4 i5 128 GB SSD & 500GB HDD in optibay; iPhone 5 32GB; ATV3; 2011 Core i7 27" iMac 2GB VRAM; "New" iPad 32GB AT&T 4G; 2012 MacBook Air 13", i7, 8GB, 256GB
WesCole is offline   0 Reply With Quote
Old May 9, 2013, 11:12 AM   #6
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
Quote:
Originally Posted by WesCole View Post
Here is something you could try (not sure if it is what you want, though):

Code:
<audio controls="controls"> 
<source src="song path" type="audio/ogg"> 
<source src="song path" type="audio/mp3"> 
Your browser does not support the audio element.
</audio>
The W3 Schools link I added uses that exact example. heh
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old May 9, 2013, 11:14 AM   #7
WesCole
macrumors 6502a
 
Join Date: Jul 2010
Location: Texas
Quote:
Originally Posted by SrWebDeveloper View Post
The W3 Schools link I added uses that exact example. heh


I didn't notice you posted one minute before me. Haha.
__________________
2010 15" MacBook Pro, Anti-Glare Hi-Res, 2.4 i5 128 GB SSD & 500GB HDD in optibay; iPhone 5 32GB; ATV3; 2011 Core i7 27" iMac 2GB VRAM; "New" iPad 32GB AT&T 4G; 2012 MacBook Air 13", i7, 8GB, 256GB
WesCole is offline   0 Reply With Quote
Old May 9, 2013, 11:50 AM   #8
benwiggy
Thread Starter
macrumors 68020
 
Join Date: Jun 2012
Quote:
Originally Posted by WesCole View Post
Here is something you could try (not sure if it is what you want, though):

Code:
<audio controls="controls"> 
<source src="song path" type="audio/ogg"> 
<source src="song path" type="audio/mp3"> 
Your browser does not support the audio element.
</audio>
Thanks for that. I've spent most of today mucking about with jPlayer, and finally got one working button that's not quite where I want it. (Along with a ton of unnecessary code.)

That <audio> code does seem pretty straightforward.
However, my one concern is: I've got around 34 tracks on the page. Will they all get loaded when the page is rendered? That's a lot of bandwidth, particularly if someone only wants to hear one track.
And of course whether IE will autoplay all the tracks at once!
__________________
2012 MacMini, 2.6GHz i7, 16Gb RAM, Fusion Drive | 2012 MacBook Pro, 16Gb RAM, 480 Gb SSD |
2009 MacBook | 2006 iMac | 2003 G3 iBook | Beige G3 | PowerMac 7600 | Mac IIsi |
benwiggy is offline   0 Reply With Quote
Old May 9, 2013, 04:01 PM   #9
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
Preload is an attribute of the audio tag in HTML5. There are three possible values, as illustrated in these examples:

<audio preload="auto"></audio>
<audio preload="metadata"></audio>
<audio preload="none"></audio> <---- USE THIS ONE
  • auto Load the entire audio file as soon as the page loads.
  • metadata Load only metadata as soon as the page loads.
  • none Do not load the audio file or any metadata until the user presses play.

IMPORTANT:

The values are hints for the browser, not absolute commands. In other words, they are a suggestion for how the browser should behave. The browser may or may not follow the hint so don't be surprised if it doesn't always work.
Preload is ignored if autoplay is on.

This is why HTML5 alone might not do the trick for you - some of the audio players linked from my original post are cross-browser compatible *and* load audio on demand.

Sorry to make this technical for you, but this is web development and sometimes it takes a little investigation, sometimes not. This time? Yep.
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old May 10, 2013, 02:52 AM   #10
benwiggy
Thread Starter
macrumors 68020
 
Join Date: Jun 2012
Quote:
Originally Posted by SrWebDeveloper View Post
Sorry to make this technical for you, but this is web development and sometimes it takes a little investigation, sometimes not. This time? Yep.
Technical is fine, when it is clear, concise and non-obfuscated! Many thanks.

Yes, that seems to work well: IE, Chrome, FireFox all behave well, and don't load nor play all the files when the page is loaded.

Only problem is that IE's controller is twice the size of all the other browsers. There don't seem to be size attributes. I'll have to adjust the design. :-(
__________________
2012 MacMini, 2.6GHz i7, 16Gb RAM, Fusion Drive | 2012 MacBook Pro, 16Gb RAM, 480 Gb SSD |
2009 MacBook | 2006 iMac | 2003 G3 iBook | Beige G3 | PowerMac 7600 | Mac IIsi |

Last edited by benwiggy; May 10, 2013 at 03:36 AM.
benwiggy is offline   0 Reply With Quote
Old May 10, 2013, 08:07 AM   #11
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
Quote:
Originally Posted by benwiggy View Post
Only problem is that IE's controller is twice the size of all the other browsers. There don't seem to be size attributes. I'll have to adjust the design. :-(
Use this selector to style via CSS (example shown below, you customize):

audio {

background-color: #95B9C7;
width: 32px;
height: 16px;

}

Beyond manipulating using the HTML5 audio tag and its attributes, if you still can't get exactly what you want the next step is to use Javascript to extend the built in functionality, accessing the API. JPLAYER is the most widely used basic HTML5 audio player using the API to make customization easier. FYI.

Good luck with the project, thanks for posting as this is a common issue and many developers still use Flash so this is a good topic. I'll let others take it from here.
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old May 10, 2013, 09:57 AM   #12
benwiggy
Thread Starter
macrumors 68020
 
Join Date: Jun 2012
That seems to work well in Safari, Firefox and Chrome.
However, IE9 won't show the controls if the height is shorter than its controller.

FireFox, of course, doesn't play mp3 files (What were you thinking?), hence the need to have everything duplicated as ogg.

And this is the simplest option!
As said, jPlayer was just ridiculously Heath-Robinson (a.k.a."Rube Goldberg" in the US.)

EDIT: Cracked it!

Code:
<audio id="player" src="sound.mp3"></audio>
<div>
	<button onclick="document.getElementById('player').play()">Play</button>
	<button onclick="document.getElementById('player').pause()">Pause</button>
	<button onclick="document.getElementById('player').volume+=0.1">Volume Up</button>
	<button onclick="document.getElementById('player').volume-=0.1">Volume Down</button>
</div>
This bit of script allows you to create your own buttons. It may need a bit of elaborating as it doesn't show whether it is playing or not.
__________________
2012 MacMini, 2.6GHz i7, 16Gb RAM, Fusion Drive | 2012 MacBook Pro, 16Gb RAM, 480 Gb SSD |
2009 MacBook | 2006 iMac | 2003 G3 iBook | Beige G3 | PowerMac 7600 | Mac IIsi |

Last edited by benwiggy; May 10, 2013 at 10:23 AM.
benwiggy is offline   0 Reply With Quote
Old May 10, 2013, 12:18 PM   #13
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
[QUOTE=benwiggy;17253055]That seems to work well in Safari, Firefox and Chrome. However, IE9 won't show the controls if the height is shorter than its controller. FireFox, of course, doesn't play mp3 files (What were you thinking?), hence the need to have everything duplicated as ogg.
/QUOTE]

One final response, to set the record straight on a few things:

The CSS I posted was an example to show how to style via the CSS/selector, not the actual styles. ;-)

Secondly, please be informed FireFox version 20 which is out now supports the MP3 codec. The issue you noted was related to a licensing and patent situation where FF would not support the MP3 (and h.264 codecs) in certain products. This all changed in January of this year.

If it doesn't work, there's a hidden option to enable:
about:config → media.windows-media-foundation.enabled → true

Now users here following this are fully informed of what's really going on with FF and MP3 support.

Finally, here is an example of a technique using HTML5 and Javascript which is 100% MP3/cross browser compatible (example, unstyled, for concept only):

Code:
<audio id="audioplayer" preload controls loop>
    <source src="audio.mp3">
</audio>
<script type="text/javascript">
    var audioTag = document.createElement('audio');
    if (!(!!(audioTag.canPlayType) && ("no" != audioTag.canPlayType("audio/mpeg")) && ("" != audioTag.canPlayType("audio/mpeg")))) {
        AudioPlayer.embed("audioplayer", {soundFile: "audio.mp3"});
    }
</script>
Look carefully -- it uses Javascript to dynamically create an audio tag and embed an MP3. If you know Javascript, and based on your last response with code that you do, you can see adding customizations is easy to create exactly what you want, without OGG, and it works on any browser any platform. Just posting it as an alternative that fits your needs, not that it's the best.

You got it from here.

Cheers.
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old May 10, 2013, 12:55 PM   #14
benwiggy
Thread Starter
macrumors 68020
 
Join Date: Jun 2012
Yes, I used different CSS values, but IE still doesn't like height if it's less than about 40px.

I downloaded FF20, but had no joy getting mp3s to work. The config option you suggest isn't there in 20.0.

Thanks for the JavaScript, I'll give it a go.

Many thanks for your excellent help.
__________________
2012 MacMini, 2.6GHz i7, 16Gb RAM, Fusion Drive | 2012 MacBook Pro, 16Gb RAM, 480 Gb SSD |
2009 MacBook | 2006 iMac | 2003 G3 iBook | Beige G3 | PowerMac 7600 | Mac IIsi |
benwiggy is offline   0 Reply With Quote
Old May 11, 2013, 11:47 AM   #15
benwiggy
Thread Starter
macrumors 68020
 
Join Date: Jun 2012
FYI: mp3 and H.264 support in FireFox 20 is limited to Windows only. Mac and Linux still work in progress, apparently.
__________________
2012 MacMini, 2.6GHz i7, 16Gb RAM, Fusion Drive | 2012 MacBook Pro, 16Gb RAM, 480 Gb SSD |
2009 MacBook | 2006 iMac | 2003 G3 iBook | Beige G3 | PowerMac 7600 | Mac IIsi |
benwiggy is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
More web page issues.. MontyW OS X 10.8 Mountain Lion 3 Oct 3, 2013 10:50 AM
Web Page oldhifi OS X 10.8 Mountain Lion 2 Sep 21, 2013 11:39 PM
No quick way to go to top of web page etc abz1981 iOS 7 7 Sep 19, 2013 02:15 PM
Web Page Capture 06Honda Mac Applications and Mac App Store 6 Jul 20, 2013 06:03 PM
Web Express! Offline Web Page Reader for iOS ProcypherApps iPhone and iPod touch Apps 2 Jul 20, 2012 10:00 AM

Forum Jump

All times are GMT -5. The time now is 08:55 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC