3

I am using this for an online radio station, and I don't need the play/pause button, or the timeline...

But I do need the volume and mute buttons, is it possible to make my own buttons and link them to the default audio element?

1 Answers1

0

The <audio> element inherits properties from HTMLMediaElement

To change these just asign them new values, as stated by W3C:

On setting, if the new value is in the range 0.0 to 1.0 inclusive, the attribute must be set to the new value and the playback volume must be correspondingly adjusted as soon as possible after setting the attribute

I would suggest you design your own html buttons and assign these to functions to controll properties such as volume. I made a little demo with a slider and mute checkbox.

Kiren
  • 130
  • 2
  • 10
  • I figured out a way to control play/pause, now I need to figure out the volume part... any ideas how I control volume? http://www.w3.org/wiki/HTML/Elements/audio that's how I figured it out... so far. – Billy Shattered Jul 28 '15 at 17:59
  • Simply changing the property volume achives this, [demo](http://jsbin.com/rirawojobe/edit?html,js,console,output) – Kiren Jul 28 '15 at 18:08
  • Likewise the audio is muted by setting `audio.muted = true` – Kiren Jul 28 '15 at 18:23
  • You should show us what you have on jsFiddle.net. A demo shows what we can work with and saves everyone time. – zer00ne Jul 28 '15 at 18:35
  • @Billy Updated my [jsBin](http://jsbin.com/ciqogi/edit?html,js,output), to use a slider. (Previous demo link was incorrect) – Kiren Jul 28 '15 at 18:51
  • @BillyShattered It does for me, not sure what might be the trouble. What browser do you use? I added some text for debuging, does the value change in the text in this [demo](http://jsbin.com/ciqogi/3/edit)? – Kiren Jul 29 '15 at 16:44
  • Not sure why its not working on Safari, if it's not safari for iOS, apple seems to have [deliberately dissabled this](https://stackoverflow.com/questions/27296391/is-there-any-possibility-to-control-html5-audio-volume-on-ios). And as for IE, caniuse.com claims it works for IE9+. If you need support for theese i think you might be best of finding a polyfill to use... – Kiren Jul 31 '15 at 15:15