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.
Related
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")
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.
I have a welcome video playing by default in loop and when a user click on change video button a different video starts playing. But there is a blackout between change of video for about 1-3 seconds. I want to present my video as the video has not changed its still playing same video [I want it look like that a single video is playing i don't want blackout interfering with it]
Here how i am changing video
<!DOCTYPE html>
<html>
<head><title>Draw your gifts here</title></head>
<body>
<video width="1000" id="videotag" autoplay controls>
<source src="media/welcome.mp4">
This browser does not support this format please upgrade your browser or use different browser
</video>
<button type="button" onClick="changeVideo()">Change Video</button>
</body>
<script>
function changeVideo(){
var video_player = document.getElementById("videotag");
video_player.src = "media/draw1.mp4";
}
</script>
</html>
You can use preload auto for preventing the loading delay
<video width="1000" id="videotag" autoplay preload="auto" controls>
<source src="media/welcome.mp4">
This browser does not support this format please upgrade your browser or use different browser
</video>
Is there anyway or javascript class or function that I can used to get the duration on the embed file?
I know we can do it like this
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()" type="button">Get video length</button><br>
<video id="myVideo" width="320" height="176" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<script>
var vid = document.getElementById("myVideo");
function myFunction() {
alert(vid.duration);
}
</script>
<p>Video courtesy of Big Buck Bunny.</p>
</body>
</html>
it only works on some supported browsers but not in ie8 below. Can anyone guide me how can I get the duration of the embed files? that can work on any crossbrowsers? or do I need to make a parser? please help thank you.