Hello i am using WAMP server and the audio player doesnt show up
This is the code

<audio controls preload="metadata">
                    <p><label>Error: Your browser does not support the audio element. Install the latest version. If you are using Safari you must install Quicktime.</label></p>
                        <source src="<?php echo $base_url.'uploads/audios/143154310611.mp3';?>" type="audio/mp3" />
                        <source src="<?php echo $base_url.'uploads/audios/143154310611.mp3';?>" type="audio/mp4" />
                        <source src="<?php echo $base_url.'uploads/audios/143154310611.mp3';?>" type="audio/wav" />
                        <source src="<?php echo $base_url.'uploads/audios/143154310611.mp3';?>" type="audio/ogg" />
                    </audio>

What is the rendered output? On all browsers, or just some? What doctype are you using?

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8">

Just tried it on MOZILLA

I dont know whats wrong. Could it be a wamp thing or a database thing? This code i posted should output an audio player right?

If I open this:

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8">
</head>
<body>
<audio controls preload="metadata">
<p><label>Error: Your browser does not support the audio element. Install the latest version. If you are using Safari you must install Quicktime.</label></p>
<source src="/uploads/audios/143154310611.mp3" type="audio/mp3" />
<source src="/uploads/audios/143154310611.mp3" type="audio/mp4" />
<source src="/uploads/audios/143154310611.mp3" type="audio/wav" />
<source src="/uploads/audios/143154310611.mp3" type="audio/ogg" />
</audio>
</body>
</html>

I see this in IE11 and Opera29 (identical when run from WAMP):

Yes it plays on Opera bun not on Mozilla. Can you guess why it that? Thanks

All your audio files are mp3's, but Firefox needs ogg hence type="audio/ogg", so you have to convert your mp3 to ogg for Firefox. And for the others you have to load also your audio as a wav file and a mp4 file.

Thanks gentlemedia. How do i do that? Can you share a link?

There are loads of audio converters. There are even online converters such as this one. I never used it myself and I don't know if you can do batch conversions with it.
http://online-audio-converter.com/

I use WavePad or Audacity, but these are full fledged audio editors.

I dont think that this is the problem. Online the audio element plays on firefox but these issues appear locally on WampServer. Could it be a php.ini thing?

I saw indeed that Firefox supports mp3 natively since version 21, so that's for 2 years already :) An ogg version is only needed if you have to support Firefox versions before that.

Try to set the mime type to audio/mpeg instead of audio/mp3.

i did. Nothing

Sorry, I don't have a clue what could possibly be wrong. Perhaps you want to try with audio.js or mediaelelement.js. Both are build on top of the audio tag so you can find out if the problem is in your implementation of the audio tag or that is a local server config issue.

Thanks gentlemedia for your time. When i find the answer i will posti it here for future refference
I am sure that it is a Wamp server 

Whatever te issue is, if you define 4 sources to your audio file, those files need to be converted to the proper format of the mime type, otherwise it's no point to use 4 source tags if you only load an mp3 version of your audio.

Yes i thought that was the issue too. But why work online (having all 4 mime types) or why play when i put the url (http://localhost/project/uploads/audios/143154310611.mp3) on the address bar when it doesnt when i call it through Wamp Server? But then again why play on Opera via Wamp Server?

The solution was a display thing

I dont really know why but when i put this on css the audio player appeared.

audio
{

  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.