Member Avatar for SimonIoa

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
  • 407 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by gentlemedia
Member Avatar for pritaeas

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

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

Just tried it on MOZILLA

Edited by Dani because: Formatting fixed
Member Avatar for SimonIoa

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?

Member Avatar for pritaeas

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

Untitled1.png 32.03 KB Untitled2.png 34.74 KB
Edited by pritaeas
Member Avatar for SimonIoa

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

Member Avatar for gentlemedia

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
Member Avatar for SimonIoa

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

Member Avatar for gentlemedia

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.

Member Avatar for SimonIoa

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?

Member Avatar for gentlemedia

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.

Member Avatar for SimonIoa

i did. Nothing

Member Avatar for gentlemedia

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
Member Avatar for SimonIoa 
Thanks gentlemedia for your time. When i find the answer i will posti it here for future refference
Member Avatar for SimonIoa 
I am sure that it is a Wamp server
Member Avatar for gentlemedia

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.

Member Avatar for SimonIoa

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?

Member Avatar for SimonIoa

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.