1 Reply Latest reply on Apr 10, 2014 11:21 AM by Nancy OShea

    Problem with audio players

    GeneStevo

      Hi Guys, like a lot of people I'm having difficulty pleasing all of the people all of the time. My issue is with audio. This page http://historypoints.org/kids-bp/cafe-w.htm has the following code to play audio which I found on an HTML5 tutorial site.

       

      <audio id="player2"  src="star-letters-w.mp3"></audio>
       <div id="audio-box"> 
       <button onclick="document.getElementById('player2').play()">Chwarae Sain</button> 
       <button onclick="document.getElementById('player2').pause()">Saib</button> 
       <button onclick="document.getElementById('player2').volume += 0.1">Sŵn+ </button> 
       <button onclick="document.getElementById('player2').volume -= 0.1">Sŵn- </button> 
       </div>
      

       

      It appears to play on a large number of devices inc many mobiles (pages are intended primarily for access by QR's placed on location so mobile function very important).

      Problem is client would prefer a more usual player inc' stop button and scrubber.

       

      On another page http://historypoints.org/kids-bp/nursery-w.htm I have used the followning solution which makes use of browsers native controls (click gold star at bottom of page).

       

      <div class="starletters-w">
      <audio controls>
        <source src="star-letters-w.mp3" type="audio/mpeg">
        <source src="star-letters-w.ogg" type="audio/ogg">
        <embed height="50" width="100" src="star-letters-w.mp3">
      </audio>
      </div>
      

       

      This is better but the IE controls are the biggest, ugliest things I've ever seen!

       

      Can anybody direct to something other than a text link that will look discrete and play on a wide variety of platforms/devices/browsers?

       

      I would also be eternally grateful if somebody could tell me whether these solutions already in place are working as-is on iPhone iPad (so much for Flash being the ultimate ubiquitous solution).

      Thanks for taking the time to read this,

      Cheers,

      Eugene.