I am trying to autoplay a background music to my website and start it playing at 10% volume. This is my code:
<audio id="bgAudio" autoplay src="music.mp3" volume="0.1"></audio>
This doesn't work for me. I've searched other ways on the internet but none of them worked. Can anyone help me?
You have to use Javascript to modify the volume after defining it because volume isn't a valid property for the audio tag. It SHOULD be IMO but it isn't. Try this:
<audio autoplay id="bgAudio">
<source src="music.mp3" type="audio/mpeg">
</audio>
<script>
var audio = document.getElementById("bgAudio");
audio.volume = 0.1;
</script>
Open the Developer Tools (Ctrl+Shift+I in Chrome) and check the Console tab, there should be some error messages. It seems that the problem is in wrong path to the .mp3 file.
Related
I have normal html file in that i add one audio tag with autoplay attribute , when the page loaded sometimes it's playing automatically sometimes it's not playing can you please help me to fix this issue ...
// src link is from google drive
<audio autoplay>
<source id="my_audio" src="https://docs.google.com/uc?export=download&id=11wfYWiukbIZJQnDL385jQs2SGQA5ESbL">
</audio>
Suggestion:
When I tested it on my end, I do not get the same intermittent issue with audio not auto-playing using HTML <audio> autoplay attribute with an audio source that's residing on Google Drive. Also, I have checked the public Google issue tracker and there's no active reports about audio from Google Drive not auto-playing when being used as an audio in an html file.
Perhaps, you can try this implementation from this similar answer:
Recently many browsers can only autoplay with sound off, so you'll need to add muted attribute to the audio tag, that is not make sense, so in my opinion the best way is adding document.getElementById('audio').play(); after your tag. Take a look at this code:
<audio controls loop style="display:none" id="my_audio">
<source src="https://docs.google.com/uc?export=download&id=11wfYWiukbIZJQnDL385jQs2SGQA5ESbL" type="audio/mpeg">
</audio>
<script>
document.getElementById('my_audio').play();
</script>
src and id above were tweaked to your actual code
You may also want to check the answers from How to make audio autoplay on chrome
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”
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 am trying to embed a html5 audio tag in my web page here is the code.
<audio controls>
<source src="http://thearabiclab.com/wp-content/uploads/2015/07/arabic-word-meeting.ogg" type="audio/ogg">
<source src="http://thearabiclab.com/wp-content/uploads/2015/07/arabic-word-meeting.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
path of both the files mp3 and ogg are correct, the issue is when the page loads first time it will display the player correctly but suddenly it will transform into something like the image below.
https://www.dropbox.com/s/xkjrql4vzr3pkrh/Screenshot%202015-07-05%2015.12.56.png?dl=0
Please help to resolve this issue.
thanks
You mentioned code working fine for me..
What you can do to debug it first make a separate HTML file copy and paste the code, check if it working or not. It's looking sure... some conflict with your Js or jQuery.
Platform: Android version 4.x
Issue: HTML 5 Audio Tag
Compiled: Framework Phonegap
I have been trying to play a simple sound with HTML 5, i cant get it to work.
I read that there is a general "not supporting" thing going on with Android, but as i understand it, version 4.x supports HTML 5 Audio tag.
Config.xml
I did enable some of the features in it eg. File access, device access and so, i even tried to include all features. Just to let u guys know.
HTML
This is what i am working with atm, i figured that maybe i should go back to directly try and get a sound out, then make the costum controls with JQ.
<audio controls="true">
<source src="media/sound.mp3" type="audio/mpeg">
<source src="media/sound.ogg" type="audio/ogg">
<source src="media/sound.wav" type="audio/wav">
Your browser does not support HTML5 audio.
</audio>
Conclusion
So far i havent hear any sounds, i tried to trigger it different ways like:
var Newsound = new Audio("sound.ogg");
Newsound.play();
Any idea or suggestion is welcome.
Thanks in advance :-)
You generally need a piece of JavaScript to get this working. Try the following:
<audio id="a" controls="true">...
var audio = document.getElementById('a');
audio.addEventListener('touchstart', function() { audio.play(); }, false);
When a user touches the audio element the sound should now play.
#Ian Devlin
I tried it, and i dident get a sound so far.
New updated exmaple:
HTML Head Section
<script>
var audio = document.getElementById('myplayer');
audio.addEventListener('touchstart', function() { audio.play(); }, false);
</script>
HTML Body Section
<body>
<audio controls="true" id="myplayer">
<source src="media/1.mp3" type="audio/mpeg">
<source src="media/1.ogg" type="audio/ogg">
<source src="media/1.wav" type="audio/wav">
Your browser does not support HTML5 audio.
</audio>
</body>
Experiencing same issue in Android >= 4.2, in Android from 2.2 to 4.0 works fine, don't have a 4.1 Android at hand to see if it works, this is my code:
<audio autoplay loop autobuffer>
<source src="http://buecrplb01.cienradios.com.ar/Mitre790.mp3" type="audio/mpeg" />
</audio>
Note on loop attribute: I've found some streams played for 1 second and stopped, after adding loop attr they played continuously.