0

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>
3
Contributors
18
Replies
73
Views
2 Years
Discussion Span
Last Post by gentlemedia
Featured Replies
  • 2

    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" /> … Read More

  • 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. Read More

  • Sorry, I don't have a clue what could possibly be wrong. Perhaps you want to try with [audio.js](http://kolber.github.io/audiojs/) or [mediaelelement.js](http://mediaelementjs.com/). 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 … Read More

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

Just tried it on MOZILLA

Edited by Dani: Formatting fixed

0

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?

2

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):

Edited by pritaeas

Attachments Untitled1.png 32.03 KB Untitled2.png 34.74 KB
0

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

3

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.

Edited by gentlemedia

0

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?

0

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.

2

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.

Edited by gentlemedia

0
Thanks gentlemedia for your time. When i find the answer i will posti it here for future refference
0

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.

0

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 */
}
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.