1

I'm trying to build a responsive audio stream player with html 5. I already achieved a fallback-solution to flash to keep things x-browser-compatible, but I got into trouble when it came to styling the player.

A standard example for the html 5 audio player would be: 

<audio id="audio" preload="auto" controls style="width:100%;">

I like how the standard controls of the html 5 audio player look when coded this way, but since my player will be used for live broadcasting only, I don't want to have the standard progress bar, just play/pause, volume and mute.

Is it possibile to somehow deactivate the progress-bar-function of the audio-tag? The only solution I found so far is to code every single button in html and style it with css. This would cost much more time.

I'm thankful for every hint, best regards,

Sebastian

LaMigra
  • 15
  • 1
  • 3

1 Answers1

0

Use Following code: Hope will work fine for you

<html>
<body>
<audio id="player" src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4"></audio>
<div>
 <button onclick="document.getElementById('player').play()">
    <img src="http://icons.iconarchive.com/icons/icons-land/play-stop-pause/48/Play-Normal-icon.png"/>
    </button>

 <button onclick="document.getElementById('player').pause()">
    <img src="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-8/48/Pause-icon.png"/>
    </button>

 <button onclick="document.getElementById('player').volume+=0.1">
    <img src="https://cdn2.iconfinder.com/data/icons/perfect-flat-icons-2/48/Volume_sound_audio_speaker_music_off_high.png"/>
    </button>

 <button onclick="document.getElementById('player').volume-=0.1">
    <img src="https://cdn2.iconfinder.com/data/icons/perfect-flat-icons-2/48/Volume_down_arrow_download_up.png"/>
    </button>
</div> 
</body>
</html>

add style on <div> if you want to add background etc.

Hop it will work for your purpose

Khurram Sharif
  • 474
  • 1
  • 4
  • 20