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>
Related
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>
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>
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>
I have the code of audio player. How can I change the picture of play/pause button when press?
<div class="onlineradio"><img src="images/Radio.jpg" alt="" />
<p><video id="yourAudio" width="0" height="0">
<source src='http://178.219.160.126:8000/stream.mp3' type='audio/mpeg' preload="auto" />
</video> <a id="audioControl" href="#"><img src="images/radioscalebutton.png" alt="" /></a></p>
</div>
<script>// <![CDATA[
var yourAudio = document.getElementById('yourAudio'),
ctrl = document.getElementById('audioControl');
ctrl.onclick = function () {
// Update the Button
var pause = ctrl.innerHTML === 'pause!';
ctrl.innerHTML = pause ? 'pause' : 'play';
// Update the Audio
var method = pause ? 'pause' : 'play';
yourAudio[method]();
// Prevent Default Action
return false;
};
// ]]></script>
I have implemented a final working solution with custom audio controls (play and pause) with toggling state button. If something is not clear for you, please ask.
Here is the working solution and the JSFiddle:
var yourAudio = document.getElementById('yourAudio'),
ctrl = document.getElementById('audioControl'),
playButton = document.getElementById('play'),
pauseButton = document.getElementById('pause');
function toggleButton() {
if (playButton.style.display === 'none') {
playButton.style.display = 'block';
pauseButton.style.display = 'none';
} else {
playButton.style.display = 'none';
pauseButton.style.display = 'block';
}
}
ctrl.onclick = function () {
if (yourAudio.paused) {
yourAudio.play();
} else {
yourAudio.pause();
}
toggleButton();
// Prevent Default Action
return false;
};
#audioControl img {
width: 50px;
height: 50px;
}
#pause {
display: none;
}
<div class="onlineradio">
<img src="images/Radio.jpg" alt="" />
<p>
<audio id="yourAudio">
<source src='http://178.219.160.126:8000/stream.mp3' type='audio/mpeg' preload="auto" />
</audio>
<a id="audioControl" href="#">
<img src="http://etc-mysitemyway.s3.amazonaws.com/icons/legacy-previews/icons/glossy-black-3d-buttons-icons-media/002110-glossy-black-3d-button-icon-media-a-media22-arrow-forward1.png" id="play"/>
<img src="https://www.wisc-online.com/asset-repository/getfile?id=415&getType=view" id="pause"/>
</a>
</p>
</div>
You can download the images of controls and use refer to them locally.