Unable to play audio using JavaScript - javascript

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>

Related

How do i implement a song playing when a user presses the submit button

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

Why is my stop button not working on this javascript audio player?

Okay, hello people. I have a simple audio player here in which the play button and the pause button work, but not the stop button. Since the pause button works, can I somehow just repeat the pause function but set the song to start again at 0.00 time and use that as my stop button?
<!DOCTYPE HTML>
<html>
<head>
<title>Audio</title>
</head>
<body>
<script>
function play(){
var audio = document.getElementById("audio");
audio.play();
}
function stop(){
var audio = document.getElementById("audio");
audio.stop();
}
function pause(){
var audio = document.getElementById("audio");
audio.pause();
}
</script>
<input type="button" value="PLAY" onclick="play()">
<input type="button" value="STOP" onclick="stop()">
<input type="button" value="PAUSE" onclick="pause()">
<audio id="audio" src="i_am.mp3" ></audio>
<audio id="audio" src="311.mp3" ></audio>
<audio id="audio" src="thievery_corporation.mp3" ></audio>
<audio id="audio" src="saxy.mp3" ></audio>
<audio id="audio" src="silent_rider.mp3" ></audio>
</body>
</html>
In your stop function, try pausing and setting the current time:
function stop() {
const audio = document.getElementById('audio');
audio.pause();
audio.currentTime = 0;
}
See also: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime

Video DOM function in mobile browser : how to stop video from a timed function

I was trying to control mobile html video from a timeout function, but I found strange behavior.
When I try to stop playing video by clicking a button, it works.
But when I try to stop it from a timed function, it doesn't work.
How do I make it work?
function doStop(){
var myvideo = document.getElementById('myvideo');
myvideo.pause();
}
<input type=button value='stopit' onclick='doStop()' > <!-- it works -->
<input type=button value='stopit' onclick='setTimeout("doStop()", 3000)'> <!- This doesn't -->
<!DOCTYPE html>
<html>
<body>
<video id="myvideo" width="400" controls>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<input type=button value='stopit' onclick='doStop()' > <!-- it works -->
<input type=button value='stopit' onclick='setTimeout(doStop, 2000)'>
</body>
<script>
var doStop= function() {
var myvideo = document.getElementById('myvideo');
myvideo.pause();
}
</script>
</html>
try this onclick='setTimeout(doStop, 3000)'

how to display multiple videos one by one dynamically in loop using HTML5 and javascript

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

How can I redirect to a URL after a HTML video has ended?

I am trying to redirect to a different URL after a html video has ended. This cannot be using a FLASH player as it won't work on iOS devices. Any help or direction will be appreciated. Here is my code:
<head>
<script type="text/javascript">
myVid = document.getElementById("video1");
function redirect()
{
if (myVid.ended == true) {
window.location = "http://www.google.com";
}
</script>
</head>
<body>
<video id="video1" controls="controls">
<source src="video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</body>
set the id of your video to 'myvid' and here is the solution
video = document.getElementById('myvid');
video.addEventListener('ended',function() {alert('video is ended');
window.location.href = 'http://www.google.com';})
here is the demo
use window.location.replace('http://www.google.com'); so user dosnt get stuck in back button loops
<script>
var video1 = document.getElementsByTagName('video1')[0];
video1.onended = function(e) {
window.location.replace('http://www.google.com');
}
</script>
Javascript:
document.getElementById('video-id').addEventListener('ended',function(){
window.location.href = 'http://www.your-url.com';
},false);
jQuery:
$("#video-id").on("ended", function() {
window.location.href = 'http://www.your-url.com';
});
Youtube:
How to detect when a youtube video finishes playing?
This worked for me :
<script>
function videoEnded() {
location.href="https://www.google.com";
}
</script>
<video id="myVideo" width="640" height="480" controls autoplay onended="videoEnded()">
<source src="video.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>

Categories