Safari HTML5 Audio Cannot Download Files Without Extension

Question

I have a music file without extension, for example, if you delete the mp3 suffix of the music file, then paste it into the 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 is impossible to reproduce.

Can anyone solve this problem?

Answer 1

I looked for a while and FINALLY found one solution using waveurfer.js

This approach is not the best solution, but just solving this problem for me. Work with Safari and Safari iOS.

1) Including the JS library.

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

2) Usually you do not need a 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 the file name without the extension.

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

5) Finally, you must define your own control panels using the Docs API .

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

By the way, if you find that the waveform function is interesting with this plugin, this is a plus LOL.

Answer 2

no full name (with extension).

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

Answer 3

Try the correct HTML5 tag syntax below:

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