I've got a tiny problem with my custom HTML MP3 player. After the player finishes the song, the pause button is still there, although there should be the play button so you can play the song again by clicking it.
Here's my code:
<!doctype html>
<html>
<head>
<script type="text/javascript">
function play() {
document.getElementById("player").play();
document.getElementById("pausebutton").style.display = "";
document.getElementById("playbutton").style.display = "none";
}
function pause() {
document.getElementById("player").pause();
document.getElementById("playbutton").style.display = "";
document.getElementById("pausebutton").style.display = "none";
}
</script>
</head>
<body onload="play()">
<audio id="player">
<source src="test.mp3" type="audio/mpeg"></source>
</audio>
<img src="play.png" onclick="play()" id="playbutton" style="display: none" />
<img src="pause.png" onclick="pause()" id="pausebutton" />
</body>
</html>
You can try to add the following within your script tag:
window.onload = function () {
var player = document.getElementById("player");
if (player) {
player.onended = function () {
pause();
player.currentTime = 0;
};
}
};
Related
I am not a developer so I hope you will bear with me. I am setting up my own website but have zero experience with html and JavaScript. I am learning by downloading demo software. For the most part I could run the demos on my own site. There is one problem. I cannot play audio. Show me the code you say. Console shows no errors. Access.log shows files being downloaded.
Not Working, shows play button but click does nothing.
<html>
<body>
<audio src="bell.ogg" id="player" loop>Get an HTML5 browser!</audio>
<form id="interface">
<input type="button" value="Play"
↪onclick="PlayPause()" id="playpause"/>
</form>
<script type="text/javascript">
var audioPlayer = document.getElementById("player");
function PlayPause()
{
if (audioPlayer.paused)
{
audioPlayer.play();
document.getElementById("playpause").value = "Pause";
}
else
{
audioPlayer.pause();
document.getElementById("playpause").value = "Play";
}
}
</script>
</body>
</html>
Working
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="bell.ogg" type="audio/ogg">
<source src="bell.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
You code works if you remove the weird carriage return character from ↪onclick="PlayPause()" and the file exists
var audioPlayer = document.getElementById("player");
function PlayPause() {
if (audioPlayer.paused) {
audioPlayer.play();
document.getElementById("playpause").value = "Pause";
} else {
audioPlayer.pause();
document.getElementById("playpause").value = "Play";
}
}
<audio src="https://upload.wikimedia.org/wikipedia/commons/3/34/Sound_Effect_-_Door_Bell.ogg" id="player" loop>Get an HTML5 browser!</audio>
<form id="interface">
<input type="button" value="Play" onclick="PlayPause()" id="playpause" />
</form>
submitQuizButton.addEventListener("click", function () {
showFinalPage();
});
I would like to implement an audio file within this button, but i've no clue how to write the code for it. Anyone has a link or can explain to me how this works?
Hope this helps
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" 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("myAudio");
function playAudio() {
x.play();
}
function pauseAudio() {
x.pause();
}
</script>
</body>
</html>
This could work
<script>
submitQuizButton.addEventListener("click", function () {
var audio = document.getElementById("audio");
audio.play();
});
</script>
<audio id="audio" src="src_here" ></audio>
Without using html
var audio = new Audio('audio.mp3');
submitQuizButton.addEventListener("click", function () {
showFinalPage();
audio.play();
});
More info can be found at: https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement
I am learning HTML-CSS-JS by doing some little exercises of my own. I have created a little code that plays an mp3 audio when I click on an image:
<html>
<head>
<title>Image audio exercise</title>
</head>
<body>
<script>
function play(){
var audio = document.getElementById("audio");
audio.play();
}
</script>
<img src="img.gif" onclick="play()">
<audio id="audio" src="sound.mp3" ></audio>
</body>
</html>
I would like to be able to play a different audio file when the click is outside the image. Is there a simple way to do it? Maybe an if-else statement?
You can do something like this. Just a simple check to see if you clicked on the image or the document.
<html>
<head>
<title>Image audio exercise</title>
</head>
<body>
<img id="theImage" src="img.gif">
<audio id="audio" src="sound.mp3" ></audio>
<script>
var audio = document.getElementById("audio");
var img = document.getElementById("theImage");
document.addEventListener("click", function(e){
if( e.target === img ){
audio.src = "sound.mp3";
audio.play();
}
else{
audio.src = "sound2.mp3";
audio.play();
}
},false);
</script>
</body>
</html>
Do something like this:
document.onclick = function(e) {
if (e.target != document.getElementById('clickMe')) {
document.getElementById('audio').play();
}else {
document.getElementById('audio2').play();
}
}
Im trying to create a nice background video that has some text on top as well as a button that i can use to pause and unpause the video, the video works fine and loops, but i cant pause the video.
<html>
<head>
<script src="js/script.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop>
<source src="dudleyByDrone.mp4" type="video/mp4">
</video>
<div id="polina">
<h1>dudley</h1>
<p>Directed by joe bloggs
<p>original article
<p>blah blah</p>
<button>Pause</button>
</div>
</body>
</html>
js (I got this code from here and though it says "// only functional if "loop" is removed" i have tried removing "loop" and it still doesn't pause:
var vid = document.getElementById("bgvid");
var pauseButton = document.querySelector("#polina button");
function vidFade() {
vid.classList.add("stopfade");
}
vid.addEventListener('ended', function()
{
// only functional if "loop" is removed
vid.pause();
// to capture IE10
vidFade();
});
pauseButton.addEventListener("click", function() {
vid.classList.toggle("stopfade");
if (vid.paused) {
vid.play();
pauseButton.innerHTML = "Pause";
} else {
vid.pause();
pauseButton.innerHTML = "Paused";
}
})
The following code should allow you to pause the video
$(function() {
$('#polina button').on("click", function() {
$('video')[0].pause();
});
});
EDIT: changing pause(); to play(); will do exactly what you think it will.
You need to reference the button with more specificity.
var playPause = document.querySelector("#playPause");
There are changes throughout the source playButton changed to playPause which is not the problem only a preference. An indirect selector may or may not work well with document.querySelector() since it tends to accept simple selectors more readily (from experience, not sure if it's documented.)
SNIPPET
var vid = document.getElementById("bgvid");
var playPause = document.querySelector("#playPause");
function vidFade() {
vid.classList.add("stopfade");
}
vid.addEventListener('ended', function() {
// only functional if "loop" is removed
vid.pause();
// to capture IE10
vidFade();
});
playPause.addEventListener("click", function() {
if (vid.paused) {
vid.play();
playPause.innerHTML = "Pause";
} else {
vid.pause();
playPause.innerHTML = "Paused";
}
})
<html>
<head>
<script src="js/script.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
<div id="polina">
<h1>dudley</h1>
<p>Directed by joe bloggs
<p>original article
<p>blah blah</p>
<button id="playPause">Play/Pause</button>
</div>
</body>
</html>
am trying to display multiple videos one by one using html5 and java script.. but its not coming.. i used the below code
<html>
<head>
<title>video example</title>
</head>
<script>
video_count =1;
videoPlayer = document.getElementById("ss");
video=document.getElementById("myVideo");
function run(){
video_count++;
//alert(video_count);
if (video_count == 4) video_count = 1;
var nextVideo = "video/video"+video_count+".mp4";
//videoPlayer.src = nextVideo;
alert(nextVideo);
videoPlayer.setAttribute("src", nextVideo[video_count]);
videoPlayer.play();
}
videoPlayer.onended(function(e) {
if (!e) {
e = window.event;
}
run();
};
</script>
<body onload="run();">
<video id="myVideo" height="400" width="400" autoplay>
<source id="ss" src="video/video1.mp4" type='video/mp4'>
</video>
</body>
</html>
currently code is displaying only first video and it will stop...
Let me show mine :D
<html>
<head>
<title>Subway Maps</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body onload="onload();">
<video id="idle_video" width="1280" height="720" onended="onVideoEnded();"></video>
<script>
var video_list = ["Skydiving Video - Hotel Room Reservation while in FreeFall - Hotels.com.mp4",
"Experience Conrad Hotels & Resorts.mp4",
"Mount Airy Casino Resort- Summer TV Ad 2.mp4"
];
var video_index = 0;
var video_player = null;
function onload(){
console.log("body loaded");
video_player = document.getElementById("idle_video");
video_player.setAttribute("src", video_list[video_index]);
video_player.play();
}
function onVideoEnded(){
console.log("video ended");
if(video_index < video_list.length - 1){
video_index++;
}
else{
video_index = 0;
}
video_player.setAttribute("src", video_list[video_index]);
video_player.play();
}
</script>
</body>
<html>
<head>
<title>video example</title>
</head>
<body>
<video id="myVideo" height="400" width="400" autoplay onended="run();">
<source id="ss" src="video/video1.mp4" type='video/mp4'>
</video>
<script>
video_count =1;
videoPlayer = document.getElementById("ss");
video=document.getElementById("myVideo");
function run(){
video_count++;
if (video_count == 4) video_count = 1;
videoPlayer.setAttribute("src","video/video"+video_count+".mp4");
video.load();
video.play();
}
</script>
</body>
</html>
Changes:
Placed the javascript code just before closing the body tag to ensure that the video object is loaded before the script is run.
video element already has an "onended" attribute so you can call the run function from there.
videoPlayer.setAttribute("src", nextVideo[video_count]); has an issue. nextVideo[video_count] implies that nextVideo is an array but is not . Its a string. So you can directly use nextVideo when setting the attribute.
videoPlayer = document.getElementById("ss"); gets the source element. You cannot call the play() function on that object, simply because that function isn't defined for it. So video.play() should work just fine.
Hope this solves your problem.
before this function call video.play(); need add: video.load();
otherwise it will still display the previous video. So the code should be
video.load();
video.play();
<video id="myVideo" height="400" width="400" autoplay onended="run();">
Add controls auto muted inside video tag.
<video id="myVideo" height="400" width="400" autoplay onended="run();" controls auto muted >
It's working fine. Thanks for you!
Little bit modified code I have attached below, I hope this is helpful for who searching the video plays continuously with entire screen,
enter image description here