Audio files within web page

benwiggy · May 8, 2013

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?

SrWebDeveloper · May 8, 2013

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-awesome-html5-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.

benwiggy · May 9, 2013

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.

SrWebDeveloper · May 9, 2013

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/2011/05/13/unlocking-the-power-of-html5-lt-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.

WesCole · May 9, 2013

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>

SrWebDeveloper · May 9, 2013

WesCole said:
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

WesCole · May 9, 2013

SrWebDeveloper said:
The W3 Schools link I added uses that exact example. heh

I didn't notice you posted one minute before me. Haha.

benwiggy · May 9, 2013

WesCole said:
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!

SrWebDeveloper · May 9, 2013

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.

benwiggy · May 10, 2013

SrWebDeveloper said:
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. :-(

SrWebDeveloper · May 10, 2013

benwiggy said:
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.

benwiggy · May 10, 2013

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.

SrWebDeveloper · May 10, 2013

benwiggy said:
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.

benwiggy · May 10, 2013

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.

benwiggy · May 11, 2013

FYI: mp3 and H.264 support in FireFox 20 is limited to Windows only. Mac and Linux still work in progress, apparently.

Search

Search

Audio files within web page

benwiggy

macrumors 68020

SrWebDeveloper

macrumors 68000

benwiggy

macrumors 68020

SrWebDeveloper

macrumors 68000

WesCole

macrumors 6502a

SrWebDeveloper

macrumors 68000

WesCole

macrumors 6502a

benwiggy

macrumors 68020

SrWebDeveloper

macrumors 68000

benwiggy

macrumors 68020

SrWebDeveloper

macrumors 68000

benwiggy

macrumors 68020

SrWebDeveloper

macrumors 68000

benwiggy

macrumors 68020

benwiggy

macrumors 68020

Our Staff