I want an mp3 file to play automatically when the page loads, but that doesn't happen.. the file only plays when I press the play button.. how do I get it to play automatically?
<audio controls autoplay>
<source src="muzic.mp3" type="audio/mpeg">
<p>If you can read this, your browser does not support the audio element.</p>
</audio>
It works with another browser, but is there any way to make autoplay work in Chrome?
Have you tried other browsers?
This should help
https://www.w3schools.com/tags/att_audio_autoplay.asp
Not all browsers support this feature because the code you have written is correct. However, there is another javascript trick that can be used I will suggest you try to use that.
Autoplay mode should be added to the opening tag of your code, this is widely supported by Chrome and FF
You only need to change that mpeg to mp3. Just like this:
<audio controls autoplay>
<source src="muzic.mp3" type="audio/mp3">
<p>If you can read this, your browser does not support the audio element.</p>
</audio>
it will work
There are two things that could be wrong.
1) your browser doesn’t support it
2) your file format “mpeg” should be “mp3”
Related
I tried to make a fan-website for a artist so I wanted to have start page music which automatically plays. But, when I open the start page, my audio file doesn't play.
This is my code:
<audio controls autoplay loop>
<source src="https://s3.amazonaws.com/Syntaxxx/bigger-picture.mp3" type="audio/mpeg" />
<p>If you can read this, your browser does not support the audio element.</p>
</audio>
What I need to do to make this start playing automatically?
autoplay is a html standard. It's up to then browser to support it or not. I suspect you used Chrome, like so many others, and were surprised it didn't work.
https://www.w3schools.com/tags/att_audio_autoplay.asp
If you test this code, like I did, in Firefox 63, it will work fine.
Google decided to break the web standard in May 2018:
https://bugs.chromium.org/p/chromium/issues/detail?id=840866#c103
As of 2020, browser defaults mean this won't work in Firefox (all platforms) and Chrome (Android included, but not Mac it seems).
it depends on your browser's [here Firefox]
Autoplay preferences (blocked or not) in
about:preferences#privacy
I encountered a problem with iOS 11 not being able to stream audio files from a HTML audio element. The file is an aac file hosted externally.
This is the code example:
<audio controls>
<source src="http://techslides.com/demos/samples/sample.aac" type="audio/mp4">
</audio>
I solved this by changing the type to "audio/mpeg", but wanted to add this to stackoverflow to prevent other people from having to look for the bug for ages.
You can open this link in iOS to view what goes wrong.
https://embed.plnkr.co/Z0fE5t5ycS1syKrKf1Nf/?show=preview
So the fix turned out to be to change the type to "audio/mpeg". Although I still have no clue what goes wrong.
Fixed code:
<audio controls>
<source src="http://techslides.com/demos/samples/sample.aac" type="audio/mpeg">
</audio>
And again the link with the initial bug and the fix:
https://embed.plnkr.co/Z0fE5t5ycS1syKrKf1Nf/?show=preview
I hope this was a worthy addition to stackoverflow as I'm quite new.
I'm trying to create a HTML5 video background for a website but I cannot seem to get it to work on Safari. Does anyone have any ideas?
Here's the HTML video tags I'm using
<video id="bgVideo" class="bg__video" autoplay loop>
<source src="./vid/Sample_Vid.ogv" type="video/ogv">
<source src="./vid/Sample_Vid.m4v" type="video/m4v">
<source src="./vid/Sample_Vid.webm" type="video/webm">
</video>
I've tried adding a script tag under it to start playing the video with JS but that's not helped either.
document.getElementById("bgVideo").play();
When I inspect the page it looks like the video element is taking up space in the DOM but it's just invisible basically.
I've also tried opening the .m4v files directly in the browser & it plays it there so I assume the file isn't an issue. These were all generated from easyhtml5video.com
I also have the Modernizer script to detect if autoplay is enabled for the browser which I've had to alter based on a pull request in the github repo as it was always saying that Safari doesn't support autoplay otherwise.
The test site I've setup is http://treetopia.neilnand.co.uk/
The supported video format for Safari is mp4 with H.264 encoding. (you have a .m4v extension and file type)
If video does not has sound - use
document.getElementById("bgVideo").volume = 0;
Safari don't allow autoplay for videos with sound.
First of all here is the website I'm currently coding :
http://www.clairereviens.com/
On each button, there is one tag for one mp3 sample. All the mp3 are playing perfectly with Safari, but with Chrome only a few buttons are working.
I tested with type audio/mp3 and audio/mpeg, but it doesn't change.
Thanks guys
Its too late but this might help anyone in future.Both audio of mp3 quality(128 and 320 Kbps) and video of mp4(in iFrame) are working fine in the google chrome version 55.0.2883.87.
<audio controls="controls" src="mydriveaddress\test.mp3" autoplay>
</audio>
<iframe src="mydriveaddress\test2.mp4" height="300" width="300" allowfullscreen=""></iframe>
Some of the buttons are not working because you are specifying the file type wrong. All the audio files are mp3 but you're specifying some of them as mpeg.
You need to change this:
<source src="sons/xxx.mp3" type="audio/mpeg">
to this:
<source src="sons/xxx.mp3" type="audio/mp3">
For all of them.
I had the same problem with Google Chrome. It's more of like a version problem of chrome. To fix that re-encode the MP3 files to a lower bitrate using Audacity or other Media Converters.
For more info: https://stackoverflow.com/a/32719143/8009667
I cannot figure out how to incorporate ogg files into a playlist for an HTML5 tag. Right now I read files from a directory JSON object that formats as follows:
var playlist = [{"url":"mp3\/122911.mp3","title":"122911"},
{"url":"mp3\/100909.mp3","title":"100909"},{"url":"mp3\/011110.mp3","title":"011110"},
{"url":"mp3\/061207C.mp3","title":"061207C"},{"url":"mp3\/110309.mp3","title":"110309"},
{"url":"mp3\/120409.mp3","title":"120409"},{"url":"mp3\/031608.mp3","title":"031608"},
{"url":"mp3\/100609C.mp3","title":"100609C"},{"url":"mp3\/120408.mp3","title":"120408"},
{"url":"mp3\/012908.mp3","title":"012908"},{"url":"mp3\/032107.mp3","title":"032107"}]
that works wonders and loading the ogg files into that object is not the issue. I just need to know how to tell firefox that the ogg files are there. Is there a parameter I'm missing in order to do that along with 'url' and 'title' in the JSON? I know it can go right in the audio tag if I'm just creating everything statically, but I'm not. The audio tag is simply:
<audio class="aud" autoplay>
<p>Your browser doesn't support HTML 5 audio.</p>
</audio>
and it works just fine with the mp3s in chrome and safari so far. I know I'm missing something simple. I have the ogg files, just confused about the parameters in the playlist I suppose. Thanks!
How this is working?
<audio class="aud" autoplay>
<p>Your browser doesn't support HTML 5 audio.</p>
</audio>
There is no source. Are you dynamically adding <source> to the <audio>?
Let me tell how it works:
You can specify multiple <source for the <audio>. Browsers will look top to bottom in the <source>s and try to play the first one it supports. So, if you write this way:
<audio class="aud" autoplay>
<source src="music.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<p>Your browser doesn't support HTML 5 audio.</p>
</audio>
This will be sufficient. Browses, that support mp3, will use the first source. If the browser, like firefox, that does not support mp3 will discard this and look next. It will find .ogg next and will play that one.
You can see more here:
http://www.w3schools.com/html/html5_audio.asp