This question already has answers here:
How to play audio?
(22 answers)
Closed 6 years ago.
Im looking to include some audio into a webpage which will be automatically played on command when some action is done. What is the easiest way to do this without having any physical play/pause buttons on the screen. If so, it it possible to do this just through javascript?
(I'm a beginner so please explain a little more in detail if you can!)
Thanks in Advance!
You can look into the HTML 5 audio tag
Omit the controls attribute to remove the physical play/pause. And add autoplay to make the sound play once it's loaded
Just add an audio tag in your html.. and link to where your audio file is:
<!DOCTYPE html>
<html>
<body>
<audio style="display:none" autoplay="autoplay" >
<source src="horse.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</body>
</html>
use either mp3 or ogg files.
http://www.w3schools.com/html/html5_audio.asp
use html5 audio tag, with autoplay attribute, like this:
https://jsfiddle.net/grassog/odL69p59/
Use audio tag
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Play audio
</audio>
Related
This question already has answers here:
Audio Tag Autoplay Not working in mobile
(4 answers)
Closed 4 months ago.
I am trying to make audio auto-play (without mute) on my website index page for Halloween effect. Tried all tricks given in the internet and Stack. Everything fails. But I found in W3Schools, tried on its page and it's working with auto-play. I am curious how it is working only on that website.
I used the same code:
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
But not working for me in my site!
There source to check autoplay : here
another one here with js
How is it working for them and not for me?
You Cann't do it.
Please see https://developer.chrome.com/blog/autoplay/
and to play it only when the browser get a user gesture .
This question already has answers here:
Chrome video autoplay
(6 answers)
Closed 10 months ago.
How can I play an video element inside an iframe. The iframe is automatically creating the video element and controls. There are many answers here pointing to add &autoplay to the src address but this is not a youtube iframe.
My HTML code:
<button #click="playVideo(item.name)">play</button>
<iframe :ref="item.name" autoplay :src="item.video_link" :title='item.name'></iframe>
JS
playVideo(itemName) {
this.$refs[itemName] <--- this give me the iframe DOM element I want to play
},
Rendered HTML:
Since you have the source MP4, you should be using <video> instead of an iframe. You'll then have full access to autoplay, controls and other features.
Based on your code, this would look something like:
<video :ref="item.name" autoplay :title='item.name'>
<source :src="item.video_link" type="video/mp4">
</video>
And since IPFS can be a bit slow for first load, you can also specify poster to show a thumbnail while the content is loading. Here's an example using an IPFS source:
<h3>IPFS Embeded Video Demo</h3>
<!-- 👇 required for autoplay in Chrome -->
<video autoplay muted autopictureinpicture controls poster="https://i.stack.imgur.com/O9qG3.jpg?s=256&g=1" height="200">
<source src="https://ipfs.io/ipfs/QmbGtJg23skhvFmu9mJiePVByhfzu5rwo74MEkVDYAmF5T" type="video/webm">
</video>
I almost made it so I can have background music but when I go to my localhost it just downloads the music instead of playing it but in the full path one it plays it in the background so how can I prevent this from happening so it won't download in localhost?
Here is the code for it and the file name is actually "Sound.mp3" as well.
<embed src="Sound.mp3" autostart="true" loop="true"width="2" height="0" controls>
Any ideas of what do add to make it just play and not download?
I am actually working on a page that looks pretty cool and wanted to add background music cause it is actually an "under construction" page and wanted to make it look cooler with background music.
The prefered way of adding audio in Html5 is to use the audio element.You can achieve them by using the following codes,
This code will play the Sound.mp3 file with the controllers displayed for the user. So the users can control the background music. With the autoplay attribute, the music will start automatically.
<audio controls="controls" autoplay="autoplay"><source src="Sound.mp3" type="audio/mpeg" /></audio>
If you don't wanna show the controls, you can simply remove the controls attribute. As follows,
<audio autoplay="autoplay"><source src="Sound.mp3" type="audio/mpeg" /></audio>
But the song will autoplay because the autoplay attribute is added.
Unfortunately, not all browsers support mp3, so it's a good idea to include multiple versions of the file in different formats. As follows,
<audio autoplay="autoplay">
<source src="Sound.mp3" type="audio/mpeg" />
<source src="Sound.wav" type="audio/wav" />
<source src="Sound.ogg" type="audio/ogg" />
<p>This content is displayed by browsers that don't recognize the audio element.</p>
</audio>
Hope it helped. Good luck with your project. :)
More Attributes
loop - Automatically loop (keep playing over and over).
Use Tag to attach the attach the audio file to the html file.
If your audio file is Sound.mp3 then include it in <audio> tag.
<audio controls>
<source src="Sound.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
or use the below code
<audio src="Sound.mp3"> </audio>
I have an audio tag inside body which contains an audio file.I want to play it when the body has finished loading.It plays in chrome but it fails to play in mozilla firefox.I tried to download the file and then play it with the local file but i got similar results.
Here's the audio tag declaration in the html:
<audio id="audio" src="http://jPlayer.org/audio/mp3/gbreggae-leadguitar.mp3"></audio>
And here is the JS used to play the audio after the body loads:
document.body.onload=function(){
document.getElementById("audio").play();
};
Use .ogg format, i had same problem and this thing solved my problem.
see below:--
Hope it helps.
<audio id="Green">
<source src="assets/audio/Green.mp3" </source>
<source src="assets/audio/Green.ogg">
</audio>
What's the best way to mute a HTML5 audio element? I don't want the browser's custom controls, so I've been looking at the javascript instead. Unfortunately it just doesn't seem to work for me :( I'm undoubtedly doing something very wrong.
<audio id="background_audio" autoplay="autoplay">
<source src="static/audio/clip.ogg" type="audio/ogg" />
<source src="static/audio/clip.mp3" type="audio/mpeg" />
</audio>
mute sound
Still getting my head around this. Thanks!
This should work:
document.getElementById('background_audio').muted = true;
Demo: http://jsfiddle.net/mattball/sVwXH/ (no jQuery)