0

I have an tag in my HTML5/JSF page, as below:

<audio controls="x"> 
            <source src="resources/audio/test.wav" type="audio/wav" /> 
</audio>

When viewed from Firefox and Chrome browser, the appearance of the audio control is black-gray (audio2.png). And the appearance of the audio control is lighter (colorful) when viewed in Eclipse's "system default Web browser" (audio1.png).

I like the color of audio1.png better. Is there a way to achieve the appearance of audio1.png in Firefox and Chrome?

enter image description here enter image description here

HoldOffHunger
  • 18,769
  • 10
  • 104
  • 133
user697911
  • 10,043
  • 25
  • 95
  • 169

1 Answers1

3

Unfortunately, there's no simple way to do it. You can't actually style the audio tag itself, you can only create your own custom controls that look the same in all browsers.

As stated in the other answer, probably the best solution is to use an existing player instead.

Community
  • 1
  • 1
fstanis
  • 5,234
  • 1
  • 23
  • 42
  • Thanks for the link, and I will explore that. Actually I don't have to use a full audio player. What I really want is a little button on the page, when I click the button, it plays the audio. Is there a way I can change my HTML5 to achieve this? – user697911 Sep 23 '15 at 20:45
  • If that's all you need, you should be able to do it using just JavaScript: `new Audio('path_to_file.mp3').play();`. See [here](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement) for more info and [here](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) to get a better idea on what other things you could do using this API. – fstanis Sep 23 '15 at 20:53
  • Can I also use .wav instead of mp3 file in Audio constructor? – user697911 Sep 23 '15 at 21:28
  • You could, but [that wouldn't work on IE](http://caniuse.com/#feat=wav). MP3 seems to still be the only one that works on all major browsers. – fstanis Sep 23 '15 at 21:54