I want to autoplay audio in my website as soon as I open my site. But it doesn't work.
<audio id="myAudio" autoplay>
<source src="./Welcome to Kitchen Nightmares..mp3" type="audio/ogg">
<source src="./Welcome to Kitchen Nightmares..mp3" type="audio/mpeg">
</audio>
<script>
function myFunction() {
var x = document.getElementById("myAudio").autoplay;
document.getElementById("demo").innerHTML = x;
}
myFunction();
Should start playing the audio file when the page loads, thanks to the autoplay attribute on the <audio> element. The buttons in the HTML code allow you to control the audio playback by calling the play() and pause() methods on the <audio> element.
Note that some browsers may not allow audio to automatically play on a website due to user experience and security concerns. In these cases, the user may need to explicitly start the audio playback by clicking on a button or some other element on the page.
<audio id="myAudio" autoplay>
<source src="./Welcome to Kitchen Nightmares..mp3" type="audio/ogg">
<source src="./Welcome to Kitchen Nightmares..mp3" type="audio/mpeg">
</audio>
<p>
<button onclick="playAudio()">Play Audio</button>
<button onclick="pauseAudio()">Pause Audio</button>
</p>
<script>
function playAudio() {
var audio = document.getElementById("myAudio");
audio.play();
}
function pauseAudio() {
var audio = document.getElementById("myAudio");
audio.pause();
}
</script>
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script>
function PlayMusic() {
var play=document.getElementById("music");
play.play();
}
$(document).ready(function(){
setTimeout(PlayMusic,3000);
})
</script>
</head>
<body>
<audio controls id="music" >
<source src="https://www.computerhope.com/jargon/m/example.mp3" type="audio/mpeg">
</audio>
</body>
</html>
After page load audio will play (1 sec delay).
URL The URL of the audio file. Possible values:
An absolute URL - points to another web site (like
src="http://www.example.com/horse.ogg")
A relative URL - points to a
file within a web site (like src="horse.ogg")
Related
I'm using the following code to display video and audio files in HTML5 player:
<video id="myvideo" controls muted>
<source src="path/to/video.mp4" type="video/mp4" />
<audio id="myaudio" controls>
<source src="path/to/audio.mp3" type="audio/mpeg"/>
</audio>
</video>
<script>
var myvideo = document.getElementById("myvideo");
var myaudio = document.getElementById("myaudio");
myvideo.onplay = function() {myaudio.play(); myaudio.currentTime = myvideo.currentTime;}
myvideo.onpause = function() {myaudio.pause();}
</script>
The problem is that I can't get control on the volume controls (mute/unmute, volume up/down). It just doesn't work. Unfortunately I don't know the correct event name for it.
Could someone help me with that?
Thanks!
Muted doesn't have a simple event tied to it, what you would need to do is track the volumechange event and check the muted attribute
myvideo.onvolumechange = function() {
if (myvideo.muted) {
myaudio.pause();
}
}
see https://www.w3.org/2010/05/video/mediaevents.html for a fairly extensive list of the events and attributes available for the standard <video> tag
I want to get duration from video links . it could be a youtube video as well as another video link. But youtube videos are playing in iframes and another are working in video tag. but im only able to fetch duration from video tag. How could get video duration from both iframe and video.
<button onclick="myFunction()" type="button">Get video length</button><br>
<video id="myVideo" width="320" height="176" controls>
<source src="https://dev.theappkit.co.uk/stylco/public/images/hair_styles/0_427_serena_grant_1619797376.mp4"
type="video/mp4">
Your browser does not support HTML5 video.
</video>
<script>
var vid = document.getElementById("myVideo");
function myFunction() {
alert(vid.duration);
}
</script>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended', myHandler, false);
function myHandler(e) {
alert("ended");
}
</script>
I would like to interact with the vertical ellipses in an HTML DOM Audio Object. Here is an example audio object: (credit: w3schools, original HTML taken from https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_controller)
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
I've had success with implementing the pause/play controls, returning the duration of the song and getting the SRC. Here I create a button that executes myFunction() to click the play button:
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var x = document.getElementById("myAudio");
x.play();
}
</script>
</body>
</html>
What I would like to do is to click on the vertical ellipses
then click again to download the song.
My question is: what is the JavaScript code to click on the vertical ellipses in the audio object?
You can't. In fact, the UI of the player is not necessarily standard. It can vary from platform to platform.
You can use .src to get the src attribute of the media element and download it yourself via the Fetch API or similar.
Is there any way of playing a sound/audio file continuously (using JavaScript) when a button (HTML) is pressed ?
i.e., as long as the button is pressed, the sound plays - once lifted the sound stops.
I've got the sound to play onclick - but obviously it stops after x amount of seconds.
Is there any way to keep it playing until lifted ?
Thanks :)
You can do this like below:
<button onmousedown="playVid()" onmouseup="pauseVid()" type="button">Play Video</button>
Code snippet:
var vid = document.getElementById("myVideo");
function playVid() {
vid.play();
}
function pauseVid() {
vid.pause();
}
<!DOCTYPE html>
<html>
<body>
<button onmousedown="playVid()" onmouseup="pauseVid()" type="button">Play Video</button>
<video id="myVideo" width="320" height="176">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<p>Video courtesy of Big Buck Bunny.</p>
</body>
</html>
You can try this with this link.
This is my code this audio format does not work in mobile please help me how to work audio in mobile browser
<html>
<body>
<audio autoplay loop id="myVideo" width="320" height="176">
<source src="wedding.ogg" type="audio/ogg">
<source src="wedding.mp3" type="audio/mp3">
</audio>
</body>
</html>
<audio id="blast" src="blast.mp3"></audio>
<audio id="smash" src="smash.mp3"></audio>
<audio id="pow" src="pow.mp3"></audio>
<audio id="bang" src="bang.mp3"></audio>
<!-- Background Track -->
<audio id="smooth-jazz" src="smooth-jazz.mp3" autoplay></audio>
Then say you have a gun trigger with a class of blasterTrigger:
Shoot!
You could then use the Javascript API to control the playing of the blast sound when the trigger is clicked like so:
var blasterTrigger = document.querySelector(".blasterTrigger");
blasterTrigger.addEventListener("click", function(){
document.getElementById("blast").play();
});
Source of above code
OR
You can use some HTML5 Audio / Video Library:-
jplayer
mediaelementjs etc.