<audio> tag for mp3 doesn't really work on Chrome

2
votes

First of all here is the website I'm currently coding :

http://www.clairereviens.com/

On each button, there is one tag for one mp3 sample. All the mp3 are playing perfectly with Safari, but with Chrome only a few buttons are working.

I tested with type audio/mp3 and audio/mpeg, but it doesn't change. Thanks guys

3
htmlgoogle-chromeaudiosafari
Try loading the file directly in Chrome - clairereviens.com/sons/P.mp3 it does not work, I'm guessing it's a problem with the files themself. – Aziz
@Aziz I tried and it doesn't work only with Chrome, with Safari it works perfectly ! – alexandresecanove
Yes I understand, try saving the audio file with different settings / bitrate / format and see if that solves the problem, it's not HTML related – Aziz
I will try again and will tell you in a few minutes, thanks for the advice – alexandresecanove
I just did a quick resave of the mp3 file using Audacity and it works on Chrome. MP3 Constant bitrate 128kbps quality and stereo channel mode – Aziz

3 Answers

3
votes

Its too late but this might help anyone in future.Both audio of mp3 quality(128 and 320 Kbps) and video of mp4(in iFrame) are working fine in the google chrome version 55.0.2883.87.

<audio controls="controls" src="mydriveaddress\test.mp3" autoplay>
</audio>
<iframe src="mydriveaddress\test2.mp4" height="300" width="300" allowfullscreen=""></iframe>
1
votes

Some of the buttons are not working because you are specifying the file type wrong. All the audio files are mp3 but you're specifying some of them as mpeg.

You need to change this:

<source src="sons/xxx.mp3" type="audio/mpeg">

to this:

<source src="sons/xxx.mp3" type="audio/mp3">

For all of them.

0
votes

I had the same problem with Google Chrome. It's more of like a version problem of chrome. To fix that re-encode the MP3 files to a lower bitrate using Audacity or other Media Converters.
For more info: https://stackoverflow.com/a/32719143/8009667