Hello I want to stop audio at determined time for example I click play and I want to stop it at 5 seconds, when it stops I want to show a button and if you click it the audio will continue again and I need to do it 5 times, any help is welcome
Here is what I have:
<audio controls id="audio2" src="song.ogg" type="audio/ogg">
<p>Your browser does not support the audio element</p>
</audio>
<script>
myAudio=document.getElementById('audio2');
myAudio.addEventListener('play', function() {
this.play();
if(this.currentTime = 5){
this.stop();
}
});
</script>
</audio>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#audio").on(
"timeupdate",
function(event){
if (this.currentTime >= 5) {
$("#audio")[0].pause();
}
});
});
</script>
</head>
<body>
<audio controls preload id="audio">
<source src="cancion.mp3" type="audio/mpeg" />
Tu navegador no soporta esta caracteristica
</audio>
<div id="current">0:00</div>
<div id="duration">0:00</div>
</body>
</html>
I did it, finally
Related
I currently work on a little website project. For this one I need buttons with pics and sound. Well, now I already work for a while on it, but the sound still does not work (except on one way completely in html....but I don't want that). It must work in Chrome and Firefox. I also need to look/want to now (still a beginner) how I can turn the sound on and off each time I press the button, but first, I want to hear sound at all...
So what can I do here?
I work in HTML/pug and ts (could only find js in code here, but well):
function playMusicButton1(){
let music = new Audio("/sound/revolution.mp3");
music.loop = true;
music.play();
}
playMusicButton1();
button(onClick="playMusicButton1()")
img(src="img/Music_Buttons_pixel_sun.png")
Run Snippet code!
You can customize this code further as per your requirement.
<!DOCTYPE html>
<html>
<body>
<audio id="audioFile">
<source src="https://rb.gy/v4em61" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>Click the buttons to play or pause the audio.</p>
<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button>
<script>
var x = document.getElementById("audioFile");
function playAudio() {
x.play();
}
function pauseAudio() {
x.pause();
}
</script>
</body>
</html>
WANT TO SHOW AUDIO CONTROL
just put controls in audio tag
<!DOCTYPE html>
<html>
<body>
<!--just add "controls" in audio tag-->
<audio id="audioFile" controls>
<source src="https://rb.gy/v4em61" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>Click the buttons to play or pause the audio.</p>
<button onclick="playAudio()" type="button">Play Audio</button>
<button onclick="pauseAudio()" type="button">Pause Audio</button>
<script>
var x = document.getElementById("audioFile");
function playAudio() {
x.play();
}
function pauseAudio() {
x.pause();
}
</script>
</body>
</html>
How do you detect when a HTML5 <video> element has finished playing?
You can add an event listener with 'ended' as first param
Like this :
<video src="video.ogv" id="myVideo">
video not supported
</video>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
// What you want to do after the event
}
</script>
Have a look at this Everything You Need to Know About HTML5 Video and Audio post at the Opera Dev site under the "I want to roll my own controls" section.
This is the pertinent section:
<video src="video.ogv">
video not supported
</video>
then you can use:
<script>
var video = document.getElementsByTagName('video')[0];
video.onended = function(e) {
/*Do things here!*/
};
</script>
onended is a HTML5 standard event on all media elements, see the HTML5 media element (video/audio) events documentation.
JQUERY
$("#video1").bind("ended", function() {
//TO DO: Your code goes here...
});
HTML
<video id="video1" width="420">
<source src="path/filename.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Event types HTML Audio and Video DOM Reference
You can simply add onended="myFunction()" to your video tag.
<video onended="myFunction()">
...
Your browser does not support the video tag.
</video>
<script type='text/javascript'>
function myFunction(){
console.log("The End.")
}
</script>
Here is a simple approach which triggers when the video ends.
<html>
<body>
<video id="myVideo" controls="controls">
<source src="video.mp4" type="video/mp4">
etc ...
</video>
</body>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended', function(e) {
alert('The End');
})
</script>
</html>
In the 'EventListener' line substitute the word 'ended' with 'pause' or 'play' to capture those events as well.
Here is a full example, I hope it helps =).
<!DOCTYPE html>
<html>
<body>
<video id="myVideo" controls="controls">
<source src="your_video_file.mp4" type="video/mp4">
<source src="your_video_file.mp4" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }
alert("Video Finished");
}
</script>
</body>
</html>
You can add listener all video events nicluding ended, loadedmetadata, timeupdate where ended function gets called when video ends
$("#myVideo").on("ended", function() {
//TO DO: Your code goes here...
alert("Video Finished");
});
$("#myVideo").on("loadedmetadata", function() {
alert("Video loaded");
this.currentTime = 50;//50 seconds
//TO DO: Your code goes here...
});
$("#myVideo").on("timeupdate", function() {
var cTime=this.currentTime;
if(cTime>0 && cTime % 2 == 0)//Alerts every 2 minutes once
alert("Video played "+cTime+" minutes");
//TO DO: Your code goes here...
var perc=cTime * 100 / this.duration;
if(perc % 10 == 0)//Alerts when every 10% watched
alert("Video played "+ perc +"%");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<video id="myVideo" controls="controls">
<source src="your_video_file.mp4" type="video/mp4">
<source src="your_video_file.mp4" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</body>
</html>
Ive been trying everything I know but I cant seem to just add in the video, in the center of the page, to loop non-stop. Am I using a wrong code or...?
I am currently using the latest Firefox browser
Code: http://pastebin.com/NJywJwaW
Try now
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var vid = document.getElementById("myVideo");
vid.autoplay = true;
vid.loop = true;
vid.controls = false;
vid.load();
</script>
</head>
<body bgcolor="#000000">
<center>
<video id="myVideo" autoplay>
<source src="sk1logo1.mp4" type="video/mp4">
</video>
</center>
</body>
</html>
This is a super simple question but I am stumped how to get the HTML to work out.
I have all the javascript set up, everything in place, but I don't know how to make the HTML work.
This is what I have
<div id="door">
<a href="inspect/squishdoor.html" onmouseover="document.door.src='storyimages/buttons/doorlarge.png'", "mouseoversound.playclip()" onmouseout="document.door.src='storyimages/buttons/doorlargeinv.png'">
<img src="storyimages/buttons/doorlargeinv.png" name="door"></a>
</div>`
I'd like it to display an image and play a sound, which it does if I choose one or the other but if they are next to each other it doesn't work.
You can use this code :
var $audio = $("audio_element"); //caching
$("object_element_id") .on ('mouseover', function(e){
$audio.play();
});
$("object_element_id") .on ('mouseout', function(e){
$audio.stop();
});
Or simply this
var audio = $("#audio");
$("play a").mouseenter( function() {
audio.play();
}
Where audio is that audio element and play a is element which is hovered.
And how to add these function. There is one example
CODE:
<!DOCTYPE html>
<html>
<body>
<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button>
<br>
<video id="video1">
<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 myVideo=document.getElementById("video1");
function playVid()
{
myVideo.play();
}
function pauseVid()
{
myVideo.pause();
}
</script>
<p>Video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck
Bunny</a>.
</p>
</body>
</html>
Tell me please when stop all element audio with class 'media_audio_player'
example:
<audio src="./ConcertMedia/'.$i2['file'].'" class="media_audio_player"> </audio>
<audio src="./ConcertMedia/'.$i2['file'].'" class="media_audio_player"> </audio>
<audio src="./ConcertMedia/'.$i2['file'].'" class="media_audio_player"> </audio>
i want use code $('.media_audio_player').get(0).pause(); but he doesnt work...
Why not work code and what me need doing?
Please check the code which plays the sound based on class applied to audio Tags.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
function playerClicked() {
audio=$(".audioplayer").get(1);
debugger;
audio.load()
if(audio.paused){
audio.play();
} else {
audio.pause();
}
}
</script>
</head>
<body>
<a id ="storyplayer" href="javascript:playerClicked();">
Click here to play.
</a>
<audio class ="audioplayer">
<source src="sound/siol.mp3" type="audio/mpeg" >
</audio>
<audio class ="audioplayer">
<source src="sound/siol.mp3" type="audio/mpeg" >
</audio>
</body>
</html>