Audio files within web page

Discussion in 'Web Design and Development' started by benwiggy, May 8, 2013.

  1. macrumors 68020

    Joined:
    Jun 15, 2012
    #1
    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?
     
  2. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #2
    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. :)
     
  3. thread starter macrumors 68020

    Joined:
    Jun 15, 2012
    #3
    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.
     
  4. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #4
    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.
     
  5. macrumors 6502a

    Joined:
    Jul 1, 2010
    Location:
    Texas
    #5
    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>
     
  6. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #6
    The W3 Schools link I added uses that exact example. ;) heh
     
  7. macrumors 6502a

    Joined:
    Jul 1, 2010
    Location:
    Texas
    #7
    :D

    I didn't notice you posted one minute before me. Haha.
     
  8. thread starter macrumors 68020

    Joined:
    Jun 15, 2012
    #8
    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!
     
  9. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #9
    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.
     
  10. benwiggy, May 10, 2013
    Last edited: May 10, 2013

    thread starter macrumors 68020

    Joined:
    Jun 15, 2012
    #10
    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. :-(
     
  11. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #11
    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. :)
     
  12. benwiggy, May 10, 2013
    Last edited: May 10, 2013

    thread starter macrumors 68020

    Joined:
    Jun 15, 2012
    #12
    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! :p
    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.
     
  13. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #13
     
  14. thread starter macrumors 68020

    Joined:
    Jun 15, 2012
    #14
    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.
     
  15. thread starter macrumors 68020

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

Share This Page