Current code:
<script>
function play() {
var audio = document.getElementById("audio");
audio.play();
}
</script>
<button class="matrixBtn" value="PLAY" onclick="play()">star shopping</button>
<audio id="audio" src="xxx"></audio>
When I press the button the music starts, which is exactly what I want. But I also want if I press the button again that the music stops. How can I do this without create a second button?
the <audio> tag is a HTMLMediaElement, so it has a property .paused which you can use to determine the current state and act accordingly:
function playPause() {
var audio = document.getElementById("audio");
if(audio.paused)audio.play();
else audio.pause();
}
Related
I am trying to figure out how to trigger an audio file when a button is hovered and has a specific number displayed it will play a specific audio file.
The first code does not work for me.
The second code works but not correctly and some how doesnt take into consideration what is being displayed on the button.
//First-Code - Assigns answer-buttons with an event listener
document.getElementById('answer-buttons').addEventListener("mouseover", answerHoverButtonAudio);
//Button Function to call answerHoverButtonAudio
function answerHoverButtonAudio() {
if (document.getElementById('answer-buttons').innerText == ('1')) {
var audio = document.getElementById('Number-1')
audio.play();
}
}
//Second-Code - This code below triggers the audio but does it no matter what text is showing on the button somehow.
//Assigns answer-buttons with an event listener
document.getElementById('answer-buttons').addEventListener("mouseover", answerHoverButtonAudio);
//Button Function to call answerHoverButtonAudio
function answerHoverButtonAudio() {
if (answerButtonsElement.innerText.includes('1')) {
var audio = document.getElementById('Number-1')
audio.play();
}
}
You can use event passed via mouseevent listener which can check innerText to play particular audio.
code sandbox - https://codesandbox.io/s/amazing-hypatia-j76ggx?file=/src/index.js
const answerHoverButtonAudio = (event) => {
if (event.currentTarget.innerText.includes("1")) {
debugger;
var audio = document.getElementById("Number-1");
audio.play();
}
};
document
.getElementById("answer-buttons")
.addEventListener("mouseover", answerHoverButtonAudio);
<div id="answer-buttons">1</div>
<audio controls id="Number-1">
<source src="https://www.w3schools.com/tags/horse.ogg" type="audio/ogg" />
Your browser does not support the audio element.
</audio>
I have a HTML code:
<audio src="whale-music.mp3" id="audio"></audio>
<button class="oi oi-media-play b-play" id="play" onclick="play()"></button>
and the script:
<script>
function play() {
var audio = document.getElementById('audio');
if (audio.paused) {
audio.play();
document.getElementById('play').removeClass('oi-media-play')
document.getElementById('play').addClass('oi-media-pause')
}else{
audio.pause();
audio.currentTime = 0
document.getElementById('play').addClass('oi-media-play')
document.getElementById('play').removeClass('oi-media-pause')
}
}
It plays and pauses the song but it doesn't change classes, neither it returns to playing at point it was stopped (it plays from the beginning). What's wrong with this code?
us this code
function play() {
var audio = document.getElementById('audio');
if (audio.paused) {
audio.play();
document.getElementById('play').classList.remove('oi-media-play')
document.getElementById('play').classList.add('oi-media-pause')
}else{
audio.pause();
audio.currentTime = 0
document.getElementById('play').classList.add('oi-media-play')
document.getElementById('play').classList.remove('oi-media-pause')
}}
the "removeClass" and "addClass" is a jquery syntax
if you use native code:
document.getElementById('play').classList.remove('oi-media-play');
document.getElementById('play').classList.add('oi-media-pause');
or Jquery:
$('#play').removeClass('oi-media-play');
I'm making several button that if I clicked it plays designated sounds each button, and stop the sounds if I clicked another button and plays that sound. And if I click again the button, the sound will repeat to the beginning. Thanks :)
javascript
$(document).ready(function(){
$('#menuIcon').mouseover(function(e) {
$('.bar1').addClass("hovered");
$('.bar2').addClass("hovered");
$('.bar3').addClass("hovered");
});
$('#menuIcon').mouseout(function () {
$(".bar1").removeClass("hovered");
$(".bar2").removeClass("hovered");
$(".bar3").removeClass("hovered");
});
});
function myFunction(x) {
x.classList.toggle("change");
$('.dropdown-menu').toggle();
}
function playSound() {
var sound= new Audio('sound campaign/10,000 Reasons.mp3');
sound.currentTime = 0
sound.play();
}
HTML
<input type="button" value="10,000 Reasons" onclick="playSound()" />
You should use the sound.pause(); to pause it.
If you would like to use multiple audios, you should use the HTML audio tag.
It would allow you to pause all of them at once.
example:
<input type="button" value="10,000 Reasons" onclick="playSound(0)" />
<audio src="sound campaign/10,000 Reasons.mp3" autoplay loop>
</audio>
function playSound(e) {
var sounds = document.getElementsByTagName('audio');
for(i=0; i<sounds.length; i++) sounds[i].pause();
var sounds = document.getElementsByTagName('audio')[e];
sound.currentTime = 0
sound.play();
}
I have a problem with to get my website remember a button press. Website automatically plays music and it has mute button, but it doesn't remember if you pushed the button when you go to next page or refresh the page. That local storage script doesn't seem to work.
function mute(){
var audio = document.getElementById("music")
var toggle = document.getElementById("toggle")
if (audio.muted == true) {
audio.muted=false
toggle.innerHTML ="MUTE"
} else {
audio.muted=true
toggle.innerHTML ="UNMUTE"
}
}
<audio id="music" autoplay loop>
<source src="/files/music.mp3" type="audio/mpeg">
<source src="/files/music.ogg" type="audio/ogg"> Your browser does not support the audio element.
</audio>
<script>
var audio = document.getElementById("music");
audio.volume = 0.3;
</script>
<button id="toggle" class="toggle" onclick="mute()">MUTE</button>
<script>
localStorage.setItem('toggle', 'true');
localStorage.getItem('toggle'); // returns 'true'
</script>
Your original script is setting 'toggle' to true every time the page refreshes.
This should work as expected, see in JSFiddle (try press Run again after clicking the button to confirm it correctly stores the value): https://jsfiddle.net/kevinkassimo/m44vh2qy/
(the following code would not work due to snippet sandboxed environment)'
<button id="toggle" class="toggle" onclick="toggle()">TOGGLE</button>
<h1 id="txt"></h1>
<script>
function toggle() {
let isToggle = +localStorage.getItem('toggle');
if (!isToggle) {
localStorage.setItem('toggle', 1);
document.getElementById('txt').innerHTML = 'Toggled';
} else {
localStorage.setItem('toggle', 0);
document.getElementById('txt').innerHTML = 'Not Toggled';
}
}
document.addEventListener("DOMContentLoaded", function(event) {
if (+localStorage.getItem('toggle')) {
document.getElementById('txt').innerHTML = 'Toggled';
} else {
document.getElementById('txt').innerHTML = 'Not Toggled';
}
})
</script>
A working sample is here:
https://jsfiddle.net/kevinkassimo/a9o6mjnw/16/
Your IF statement checks for the Boolean of TRUE, but your local storage variable is set to the string “true”
Im green with JS, bit i would like to implement to my website html 5 video.
video code looks like this
<video id="myvideo" style=width:600px; height:550px controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
I would like to make video pasue on 15 second and trigger an event
Now my event is on button
button code
<button onclick="myFunction()">Watch</button>
<script>
function myFunction() {
RC_STARTGATE();
}
</script>
Edit: Button is temporary solution. I would like to remove button and something like this:
Video starts=> after 15 seconds it pauses=> and triggers same event as button did RC_STARTGATE().
Edit 2: Great! now i need to get button removed and start timeout when video starts.
var vid = document.getElementById("myVideo");
function myFunction(){
vid.play();
setTimeout(function(){
vid.pause();
}, 15000); //
setTimeout(function(){
RC_STARTGATE();
}, 15000); //
}
When the button is clicked, the video starts playing, and after 15 seconds you want it stopped?
var vid = document.getElementById("myvideo");
function myFunction(){
vid.play();
setTimeout(function(){
vid.pause();
}, 15000); //15 second timeout in milliseconds
}
EDIT 2
To remove the button, add an id (<button id="mybtn">) so you can reference and remove it like this:
var btn = document.getElementById("mybtn");
btn.parentElement.removeChild(btn);