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>
Related
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>
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>
I want to make an icon that lets you mute or unmute. The icon itself works, but the audio doesn't play. Here's the code:
<audio id="myaudio" controls loop>
<source src="https://www.w3schools.com/jsref/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Mute_Icon.svg/1200px-Mute_Icon.svg.png"
style="height: 80px; width: 80px" id="imgClickAndChange" onclick="changeImage()" />
</p>
<script language="javascript">
function changeImage() {
var x = document.getElementById("myAudio");
if (document.getElementById("imgClickAndChange").src == "https://www.iconfinder.com/data/icons/octicons/1024/unmute-512.png")
{
document.getElementById("imgClickAndChange").src = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Mute_Icon.svg/1200px-Mute_Icon.svg.png";
x.play();
}
else
{
document.getElementById("imgClickAndChange").src = "https://www.iconfinder.com/data/icons/octicons/1024/unmute-512.png";
x.pause();
}
}
</script>
Can anyone help me?
(also yes I am using w3schools's sounds)
x.muted is solution:
function changeImage() {
var x = document.getElementById("myaudio");
if (
document.getElementById("imgClickAndChange").src ==
"https://www.iconfinder.com/data/icons/octicons/1024/unmute-512.png"
) {
document.getElementById("imgClickAndChange").src =
"https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Mute_Icon.svg/1200px-Mute_Icon.svg.png";
x.muted = true;
} else {
document.getElementById("imgClickAndChange").src =
"https://www.iconfinder.com/data/icons/octicons/1024/unmute-512.png";
x.muted = false;
}
}
<audio id="myaudio" controls loop>
<source src="https://www.w3schools.com/jsref/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<img src="https://www.iconfinder.com/data/icons/octicons/1024/unmute-512.png"
style="height: 80px; width: 80px" id="imgClickAndChange" onclick="changeImage()" />
</p>
<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>
I need a javascript code because I want to remove the class w3-spin in this id="imgg" when i pause an audio element...
<div style="width:100%;height:150px;">
<img id="imgg" class="w3-spin img-circle" src="Pic/sky.jpg" style="width:44%;height:149px;">
<img id="imgg" class="w3-spin img-circle" src="Pic/b.png" style="width:20%;height:75px;top:85px;left:150px;position:absolute;">
</div>
<audio id="audio" controls loop autoplay style="width:100%;" onclick="pause()">
<source src="<?php echo $row['Song']?>" type="audio/mpeg">
</audio>
my javascript..
<script>
var player = document.getElementById("audio");
var imgg1 = document.getElementById("imgg");
function pause() {
player.pause();
imgg1.removeClass("w3-spin");
}
</script>
The event you should be listening to when an audio element is paused is pause.
As with play, it's (you guessed it) play.
Check media events list on MDN for a list of possible event you can listen to for audio element.
Here's an example.
Added red background color to .w3-spin to help illustrate the class name.
var audioPlayer = document.getElementById("audio");
var imgg = document.getElementById("imgg");
audioPlayer.onpause = function() {
imgg.className = imgg.className.replace(/\bw3-spin\b/g, "");
};
audioPlayer.onplay = function() {
if (imgg.className.indexOf("w3-spin") === -1) {
imgg.className = imgg.className + " w3-spin";
}
};
.w3-spin {
background-color: red;
}
<div style="width:100%;height:150px;">
<img id="imgg" class="w3-spin img-circle" src="Pic/sky.jpg" style="width:44%;height:149px;">
<img id="imgg2" class="w3-spin img-circle" src="Pic/b.png" style="width:20%;height:75px;top:85px;left:150px;position:absolute;">
</div>
<audio id="audio" controls loop autoplay style="width:100%;">
<source src="https://upload.wikimedia.org/wikipedia/en/2/26/Europe_-_The_Final_Countdown.ogg" type="audio/ogg">
</audio>