Why isn't my audio element working in HTML5? - html

I am using the chrome 37 and firefox 31.
When I add the audio tag for chrome. It just doesn't play. There is a cross over the sound control icon
On firefox v31 it just disappears. When I check th w3schools website it works fine. I am using exactly the same code they are using with and doubled check the audio src to make sure its correct but it still doesn't play. Can anyone please help me figure out whats going on??
Below is my code
<audio controls>
<source src="new_simplemenu_order.mp3" type="audio/mpeg" >
Your browser does not support the audio element.
</audio>

I was having the same problem.
It seems to work by if you change your file type to .ogg and also don't use underscores in your file name.
Also, try altering your code to this (credit to superuser.com):
<audio controls preload="auto">
<source src="NewSimpleMenuOrder.ogg" type="audio/ogg" />
</audio>
You can hide the controls by doing the following
<audio preload="auto">
<source src="NewSimpleMenuOrder.ogg" type="audio/ogg" />
</audio>
And autoplay by doing this:
<audio autoplay>
<source src="NewSimpleMenuOrder.ogg" type="audio/ogg" />
</audio>
(I hope this fixes your problem!)

Related

HTML audio won't play file but download works

I feel like I have tried everything.
I have the following:
<audio controls ng-src="https://myS3routeToFile" class="w-full"></audio>
I have also tried the following variation:
<audio controls>
<source src="https://myS3routeToFile" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
I am able to press download it does download the file correctly.
What am I doing wrong?
Use the second version and add an ogg version of your audio file to make it complatble with all browsers.
<audio controls>
<source src="your_file.ogg" type="audio/ogg">
<source src="your_file.mp3" type="audio/mpeg">
</audio>

No mouse responce on html audio (windows app ionic)

I build an app for android and windows (universal app) but i can't figure out why the audio doesn't work for windows app, it work perfectly on browser and android.
<audio controls="true">
<source src="/www/audio/FRCath.mp3" type="audio/mpeg">
</audio>
With the code above i got the player but nothing happen if i hit the play button. The player display the correct duration of the file, so the path must be good.
And this code work perfectly on edge.
edit: it work when i use my keyboard but the player doesn't respond to the mouse.
<ion-view cache-view="false" view-title="audio">
<ion-content sroll="false">
<audio controls>
<source src="/www/audio/FRCath.mp3" type="audio/mpeg">
</audio>
<audio controls>
<source src="http://www.scricciolo.com/eurosongs/Phylloscopus.inornatus.wav" type="audio/mpeg">
</audio>
</ion-content>
</ion-view>
You can do like this...you can remove the true attribute from the audio tag. And i don't know whether i am correct or not but i think your sound file is wrong somewhere, that's why i have used a different sound file.
<audio controls>
<source src="http://www.scricciolo.com/eurosongs/Phylloscopus.inornatus.wav" type="audio/mpeg">
</audio>

HTML5 audio problems

I have a HTML5 audio player on my website, it is not working, however it works in all browsers except chrome.
<audio controls>
<source src="http://www.mywebsite.com/path/2015-09-27.mp3" type="audio/mpeg">
</audio>
However a week or more ago the audio files did work, and I didn't change anything, they just stopped being able to be played.
I had the same problem with a mp3 file. I converted the *.mp3 file to *.ogg (e.g. with Audacity) and added a second source to the audio tag:
<audio controls>
<source src="file.mp3" type="audio/mpeg">
<source src="file.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
Now everything works fine.
(found at W3Schools)

Playing audio from an internal location on iPhone

I have a simple site which I want to play audio on iPhone safari. It has only the following code:
<audio style="height:77px;" controls>
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Note the src is local. This does not play the audio
However if I change the source to something external such as this...
<audio style="height:77px;" controls>
<source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
It works perfectly.
It's worth pointing out both methods work fine on desktop, on iPhone only the external src works.
Any ideas for why this may be happening?

Play sound file in a web-page in the background

I want to play a sound file on my web-page in the back-ground(don't want Media player UI to appear), my web-site will run on Fire-Fox, i used the Embed element and set the Hidden attribute to be true <embed name="myMusic" src="Masgon.mp3" type="audio/midi"
autostart="false" Hidden="true" loop="true"></embed>
the problem is that no sound is played unless i removed the hidden attribute on this case the sound file is played and the media player UI appears but i don't want that.
<audio src="/music/good_enough.mp3">
<p>If you are reading this, it is because your browser does not support the audio element. </p>
</audio>
and if you want the controls
<audio src="/music/good_enough.mp3" controls>
<p>If you are reading this, it is because your browser does not support the audio element.</p>
</audio>
and also using embed
<embed src="/music/good_enough.mp3" width="180" height="90" loop="false" autostart="false" hidden="true" />
<audio src="/music/good_enough.mp3" autoplay>
<p>If you are reading this, it is because your browser does not support the audio element. </p>
<embed src="/music/good_enough.mp3" width="180" height="90" hidden="true" />
</audio>
Works for me just fine.
Though this might be too late to comment but here's the working code for problems such as yours.
<div id="player">
<audio autoplay hidden>
<source src="link/to/file/file.mp3" type="audio/mpeg">
If you're reading this, audio isn't supported.
</audio>
</div>
<audio controls autoplay loop>
<source src="path/your_song.mp3" type="audio/ogg">
<embed src="path/your_song.mp3" autostart="true" loop="true" hidden="true">
</audio>
[ps. replace the "path/your_song.mp3" with the folder and the song title eg. "music/samplemusic.mp3" or "media/bgmusic.mp3" etc.
With me the problem was solved by removing the type attribute:
<embed name="myMusic" loop="true" hidden="true" src="Music.mp3"></embed>
Cerntainly not the cleanest way.
If you're using HTML5:
MP3 isn't supported by Firefox. Wav and Ogg are though.
Here you can find an overview of which browser support which type of audio:
http://www.w3schools.com/html/html5_audio.asp
If you don't want to show controls then try this code
<audio autoplay>
<source src="song.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
if you want it just normal:
<audio src="sus.mp3">
<script>alert("Your browser doesn't support the Audio tag!")</script>
</audio>`
if you want it to automatically start on load: (Not supported by chrome)
<audio src="sus.mp3" autostart="true">
<script>alert("Your browser doesn't support the Audio tag!")</script>
</audio>
if you want the controls
<audio src="sus.mp3" autostart="true" controls>
<script>alert("Your browser doesn't support the Audio tag!")</script>
</audio>