Safari HTML5 audio cannot load files without extension

Question

I have a music file without extension, eg if you remove the mp3 suffix of the music file, then embed in audio tag.

<audio preload="auto" controls="controls">
    <source src="12" type="audio/mpeg">
</audio>

or

<audio preload="auto" src="12" controls="controls">

</audio>

I tested on my safari on IOS7. It can't be played.

Does anybody can fix this problem?

Telecast

Did you find a solution? I've ran into the same problem. Works on PC, on Android (both even without the "type" attribute), but not on IOS. – Kerrison

Answer 1

Looked around for a while and FINALLY found one soluction using wavesurfer.js

This approach is not the best solution but simply solve this head-aching issue for me. Working both on Safari and IOS Safari.

1) Including JS library.

<script src="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.0.52/wavesurfer.min.js"></script>

2) Normally you don't need the waveform so you can just hide it.

<div id="waveform" style="display:none"></div> 

3) Just put some default settings for the hidden waveform.

var wavesurfer = WaveSurfer.create({
    container: '#waveform',
    waveColor: 'violet',
    progressColor: 'purple'
});

4) Now you can use a filename without extension.

wavesurfer.load('12'); // '12' is my mp3 file name

5) At last, you have to define your own control bars using their API Docs.

$(some_button).on('click', function() {
    wavesurfer.playPause();
});

By the way, if you found the waveform feature interesting this plugin is a plus LOL.

Montez

See example on our website: huochaihe.com/share.php?id=2141 (play button works only in mobile...) – Montez

Answer 2

I had the same problem and was able to solve it.

It seems that an incorrect Content-Type HTTP header, rather than the missing file extension (.mp3), is the primary cause of the problem.

The web server (e.g. Apache) does not send the correct Content-Type HTTP header for files without an extension. For MP3 files, this should be "audio/mpeg". Safari seems to analyze the Content-Type HTTP header before playing an audio file. Chrome seems to have a slightly different solution. Perhaps Chrome uses the content of the audio file as a guide.

You can solve the problem by sending the correct Content-Type HTTP header. You can do this using PHP, for example, as follows:

<?php 

$audioFilePath = 'mp3_file_without_extension';
header('Content-Type: audio/mpeg');
readfile($audioFilePath);

Observance

Answer 3

your not mention the full name(with extension).

<source src="12.mp4" type="audio/mpeg">

Roam

the problem is my file name is "12" really. My file url is getting from the third part service. You can create a test file remove the file extension. It will not play on ios. – Telecast

HTML audio can't play file without extension on IOS. – Telecast

Answer 4

Try the below correct syntax of HTML5 audio tag :

<audio controls="controls">
<source  src="audio.mp3">
<p>Your browser does not support the audio element.</p>
</audio>

Ruthenic