I had this working before and for some reason the script no longer works. I've been spending ages trying to solve it but can't seem to find the reason. I just want my video to pause upon clicking.
var video = document.getElementById("myVideo");
var btn = document.getElementById("myBtn");
function myFunction() {
if (video.paused) {
video.play();
btn.innerHTML = "Pause";
} else {
video.pause();
btn.innerHTML = "Play";
}
}
And here is the HTML code:
<video autoplay muted loop id="myVideo">
<source src="video.mp4" type="video/mp4">
</video>
<button id="myBtn" onclick="myFunction()">Pause</button>
Related
How can I play audio on button click inside same div using javascript without element id? I want to display the default html player with just a play button. Refer to picture
var audiofile = document.querySelectorAll('div[class$="audio-clip"]');
audiofile.forEach(function(item) {
var btn = document.createElement('button');
btn.className = 'btn';
btn.textContent = "Click to Listen";
btn.setAttribute("type", "button");
btn.addEventListener('click', () => {
item.find('audio').play();
})
item.appendChild(btn);
});
<div class="audio-clip">
<audio preload="none" controls="">
<source src="https://staging.buellairhorns.com/wp-content/uploads/2022/03/Buell-Duplex-Air-Horn-Buell-Airhorns.mp3" type="audio/mpeg">
</audio>
<button class="btn" type="button">Click to Listen</button></div>
var audiofile = document.querySelectorAll('div[class$="audio-clip"]');
audiofile.forEach(function(item) {
var btn = document.createElement('button');
btn.className = 'btn';
btn.textContent = "Click to Listen";
btn.setAttribute("type", "button");
btn.addEventListener('click', () => {
item.getElementsByTagName('audio')[0].play();
})
item.appendChild(btn);
});
<div class="audio-clip">
<audio preload="none" controls="">
<source src="https://staging.buellairhorns.com/wp-content/uploads/2022/03/Buell-Duplex-Air-Horn-Buell-Airhorns.mp3" type="audio/mpeg">
</audio>
<button class="btn" type="button">Click to Listen</button></div>
I want to make a website that shows different content every time the side gets reloaded. The content contains an image and an audio
I´ve found an script that randomizes my images after every reload but it plays all the sounds at the same time. I think I have to use an other tag than "ID" but since I am an absolute beginner I didn´t found the right one yet. Thanks in advace!
<!DOCTYPE html
<html>
<head>
<title>johannes</title>
<script language="javascript" type="text/javascript" src="random.js"></script>
</head>
<body>
<div id="spaghetti">
<img src="/Users/henrigimm/Documents/Johannes test/Illu Johannes/spaghetti.png">
<audio autoplay>
<source src="/Users/henrigimm/Documents/Johannes test/spaghetti.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<div id="bier">
<img src="/Users/henrigimm/Documents/Johannes test/Illu Johannes/bier.png">
<audio autoplay>
<source src="/Users/henrigimm/Documents/Johannes test/bier.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<div id="zelt">
<img src="/Users/henrigimm/Documents/Johannes test/Illu Johannes/zelt.png">
<audio autoplay>
<source src="/Users/henrigimm/Documents/Johannes test/zelt.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</body>
</html>
randomNumber = Math.floor(Math.random()*3+1);
window.onload = function() {
if (randomNumber == 1) {
document.getElementById("spaghetti").style.display = "inline";
document.getElementById("zelt").style.display = "none";
document.getElementById("bier").style.display = "none";
}
if (randomNumber == 2) {
document.getElementById("spaghetti").style.display = "none";
document.getElementById("zelt").style.display = "inline";
document.getElementById("bier").style.display = "none";
}
if (randomNumber == 3) {
document.getElementById("spaghetti").style.display = "none";
document.getElementById("zelt").style.display = "none";
document.getElementById("bier").style.display = "inline";
}
}
You can simplify this
const IDs = ["spaghetti","zelt","bier"];
const randomNumber = Math.floor(Math.random()*IDs.length);
document.getElementById(IDs[randomNumber]).style.display = "inline";
document.getElementById(IDs[randomNumber]+"Play").play();
and have css
#spaghetti,#zelt, #bier { display:none;}
or better give them all the same class and have
.audioLoad { display:none;}
Note I removed the autoplay and added an ID I could trigger
const IDs = ["spaghetti", "zelt", "bier"];
window.addEventListener("load", function() { // when page loads
const randomNumber = Math.floor(Math.random() * IDs.length);
document.getElementById(IDs[randomNumber]).style.display = "inline";
document.getElementById(IDs[randomNumber]+"Play").play();
})
.audioLoad {
display: none
}
img { height: 400px}
<html>
<head>
<title>johannes</title>
<script src="random.js"></script>
</head>
<body>
<div id="spaghetti" class="audioLoad">spaghetti
<img src="https://www.solo.be/uploadedimages/recepten/afbeeldingen/168335-spaghetti-bolognese.jpg">
<audio id="spaghettiPlay">
<source src="/Users/henrigimm/Documents/Johannes test/spaghetti.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<div id="bier" class="audioLoad">bier
<img src="https://static.ah.nl/static/gall/img_228761_Gall_500.png">
<audio id="bierPlay">
<source src="/Users/henrigimm/Documents/Johannes test/bier.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<div id="zelt" class="audioLoad">zelt
<img src="https://images.obi.at/product/DE/1500x1500/566276_3.jpg">
<audio id="zeltPlay">
<source src="/Users/henrigimm/Documents/Johannes test/zelt.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</body>
</html>
<button class="button" style="width: 200px;" onclick="playSound()">Play sound</button>
function playSound() {
audio.pause();
var audio = new Audio('V2018-Museum-filer/mp3file.mp3');
audio.play();
}
When clicking the button multiple tiems to start the audio multiple times, i want to stop the audio already playing for it to replay. How can i do this? I get an error saying audio is undefined.
Hope this helps...
When the button is clicked, the audio is paused and restarts on second click.
function playSound() {
var audioControl = document.getElementById('sound');
var btn = $("#player");
if (btn.click && audioControl.paused !== true) {
audioControl.pause();
} else if (btn.click && audioControl.paused === true) {
audioControl.currentTime = 0;
audioControl.play();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio id="sound" controls>
<source src="http://www.largesound.com/ashborytour/sound/brobob.mp3" type="audio/mpeg">
</audio>
<button id="player" style="width: 200px;" onclick="playSound()">Play sound</button>
Hi I used HTML5 audio player and linked a mp3 file and autoplay functionality did . But it's time duration 37 minutes but it stop after 1 minute.
Here is my code jsfiddle
var audio1 = document.getElementById("player1");
var btn1 = document.getElementById("pButton1");
var pause_hover1 = document.getElementById("pause-hover");
var vid = document.getElementById("player1");
btn1.addEventListener("click", function(){
if (audio1.paused) {
audio1.play();
btn1.classList.remove("pause1");
btn1.classList.add("play1");
pause_hover1.style.display = "none";
} else {
audio1.pause();
btn1.classList.remove("play1");
btn1.classList.add("pause1");
pause_hover1.style.display = "block";
}
});
<audio loop id="player1" autoplay="true" src="http://downloadmotivations.com/wp-content/themes/downloadmotivation/Dream.mp3" type="audio/mpeg">
</audio>
<div id="audioplayer1">
<button id="pButton1" style="background: transparent;" class="play1"> audio</button>
</div>
I have changed your code to the following and it's working now at least at my end.
if you don't want control please remove controls from audio tag
var audio1 = document.getElementById("player1");
var btn1 = document.getElementById("pButton1");
var pause_hover1 = document.getElementById("pause-hover");
var vid = document.getElementById("player1");
btn1.addEventListener("click", function(){
if (audio1.paused) {
audio1.play();
btn1.classList.remove("pause1");
btn1.classList.add("play1");
pause_hover1.style.display = "none";
} else {
audio1.pause();
btn1.classList.remove("play1");
btn1.classList.add("pause1");
pause_hover1.style.display = "block";
}
});
<audio autoplay="true" controls id="player1">
<source src="http://downloadmotivations.com/wp-content/themes/downloadmotivation/Dream.mp3" type="audio/ogg">
<source src="http://downloadmotivations.com/wp-content/themes/downloadmotivation/Dream.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div id="audioplayer1">
<button id="pButton1" style="background: transparent;" class="play1"> audio</button>
</div>
When I run the code bellow, I expect the button to change from pause to play, and vise versa.
What can I do to get the button from pause to play?
I used this tutorial, https://www.youtube.com/watch?v=V8_wEZD160g.
Thanks!!
<style type="text/css">
div#video_controls_bar {
padding:10px;
}
</style>
<script>
function playPause(btn, vid){
var vid = document.getElementById(vid);
vid.load();
}
if(vid.paused){
vid.play();
btn.innerHTML = "Pause";
}
else{
vid.pause();
btn.innerHTML = "Play";
}
</script>
<video id="ruqia_video1" width="320" height="180" >
<source src="videos/Rooqia01.mp4" />
</video>
<div id="video_controls_bar">
<button id="playpausebtn" onclick="PlayPause(this, 'ruqia_video1' )">Pause</button>
</div>
There were a few errors, but I made it working: https://jsfiddle.net/fu8eoofe/2/
Your function looked actually like this:
function playPause(btn, vid){
var vid = document.getElementById(vid);
vid.load();
}
It was closed before the if statements. Second thing is that you were calling a function named PlayPause when your function's name is playPause.
I replaced vid.paused with new variable for demonstration purposes (it wouldn't work without a video).
you have some errors in your code.
corrected :
<style type="text/css">
div#video_controls_bar {
padding:10px;
}
</style>
<script>
function playPause(btn, vid){
var vid = document.getElementById(vid);
vid.load();
if(vid.paused){
vid.play();
btn.innerHTML = "Pause";
}
else{
vid.pause();
btn.innerHTML = "Play";
}
}
</script>
<video id="ruqia_video1" width="320" height="180" >
<source src="videos/Rooqia01.mp4" />
</video>
<div id="video_controls_bar">
<button id="playpausebtn" onclick="playPause(this, 'ruqia_video1' )">Pause</button>
</div>