How to unmute audio using Vanilla JS? - javascript

I have added mute function to my game, I know I can simply mute all audio on webpage by calling function mutePage(), but I was wondering how Can I make it unmuted back again without reloading a page.
function sound(src) {
this.sound = document.createElement("audio");
this.sound.src = src;
this.sound.setAttribute("preload", "auto");
this.sound.setAttribute("controls", "none");
this.sound.style.display = "none";
document.body.appendChild(this.sound);
this.play = function(){
this.sound.play();
}
this.stop = function(){
this.sound.pause();
}
}
function muteMe(elem) {
elem.muted = true;
elem.pause();
}
function mutePage() {
var elems = document.querySelectorAll("audio");
document.getElementById("snd").style.textDecoration = "line-through";
[].forEach.call(elems, function(elem) { muteMe(elem); });
}

You could do this with a button that your player clicks. Add an event listener to the button and inside of it mute your Audio Object.
button.addEventListener('click', () => {
this.sound.muted = false;
});
be sure to use an arrow function otherwise "this" will be scoped to the event handler context

Related

Recieving the error "play() failed because the user didn't interact with the document first" when the play() methodbeing executed by event listener

Getting the following error message despite requiring user input to trigger the play method for an Audio object. It does seem to start functioning but only after the second touch is made on the control element.
script.js:24 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
JS
const control = document.querySelector(".control")
const audioElement = new Audio('Music/9oclock.mp3')
const playbtn = document.querySelector("#play")
const pausebtn = document.querySelector("#pause")
let playing = false;
control.addEventListener("touchstart", function () {
playMusic()
})
function playMusic() {
if (playing) {
playing = false;
pauseAudio();
playbtn.style.display = "block"
pausebtn.style.display = "none"
} else {
playing = true;
playAudio();
playbtn.style.display = "none"
pausebtn.style.display = "block"
}
}
function playAudio() {
audioElement.play();
}
function pauseAudio() {
audioElement.pause();
}

How to prevent click function from running on double click?

I am new to Jquery and Javascript. I want my code to play a sound when clicking anywhere in the document, and a different sound when double clicking on a .marker.
It works right now, but when I double click the marker it plays the .click function twice along with the double click function.
How do I prevent the .click from playing when I double click?
Here is my Jquery code:
$(document).ready(function () {
$(document).click(function () {
setTimeout(function () {
let audio = document.createElement("audio");
audio.src = "audio/click-audio.wav";
audio.play();
}, 700);
});
$('.marker').dblclick(function () {
let audio = document.createElement("audio");
audio.src = "audio/page-audio.wav";
audio.play();
});
});
Just check whether clicked element is .marker :
$(document).click(function(event) {
if($(event.target).is(".marker")) return ;
setTimeout(function() {
let audio = document.createElement("audio");
audio.src = "audio/click-audio.wav";
audio.play();}, 700);
});
Using event properties, you could achieve
$('marker').click(function(event) {
if(!event.detail || event.detail == 1){
// code here.
// It will execute only once on multiple clicks
}
});
The stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event.
$(document).click(function () {
setTimeout(function() {
let audio = document.createElement("audio");
audio.src = "audio/click-audio.wav";
audio.play();}, 700);
});
$('.marker').click(function (event) {
let audio = document.createElement("audio");
audio.src = "audio/page-audio.wav";
audio.play();
event.stopPropagation();
});
});
hope it will help you

Play and Pause with onclick on the same Img

The following script is playing a soundfile when i click on a img (onclick). How do i pause it by clicking on the same img? I´ve tried audio.pause(), but it won´t work.
function play(){
var audio = document.getElementById("myaudio");
audio.style.display="block";
audio.play();
}
<img src="Bilder/play2.png">
You should rename your function to audioHandler() for example which will handle whether to play or pause your audio.
Create a boolean to remember if your audio was playing or was on pause.
//initial status: audio is not playing
var status = false;
var audio = document.getElementById("myaudio");
function audioHandler(){
if(status == false || audio.paused){
audio.play();
status = true;
}else{
audio.pause();
status = false;
}
}
Check the media.paused property of your HTMLMediaElement
function play_pause(media) {
if (media.paused) {
media.play();
else {
media.pause();
}
}
Use this in the handler on the element you want to control the action
var elm = document.getElementById('play_button'),
audio = document.getElementById('myaudio');
elm.addEventListener('click', function (e) {
play_pause(audio);
});

Play video if no other video playing

Hi I have a page with multiple small videos which can be played by clicking on the covering image. How can I stop them playing onclick if there is already one playing? My script is as follows
function PlayVideo(aid, vid)
{
var myVideo = document.getElementsByTagName("video");
if (myVideo.paused) {
document.getElementById(vid).style.display = "block";
document.getElementById(vid).play();
document.getElementById(aid).style.display = "none";
document.getElementById(vid).addEventListener('ended', myHandler, false);
function myHandler(e) {
if (!e) {
e = window.event;
}
document.getElementById(vid).style.display = "none";
document.getElementById(vid).load();
document.getElementById(aid).style.display = "block";
}
} else {
alert("this is an alert");
return false;
}
}
Works fine without the if/else statement but any click starts the movie and then several movies are playing at once how do I define the parameters so that IF any video is playing then a new one will not start.
myVideo is a NodeList, you have to check the value of each video.
var allVideos = document.getElementsByTagName("video");
var areAllPaused = true;
for(var i=0; i < allVideos.length; i++) {
if (!allVideos[i].paused) {
areAllPaused = false;
}
}
you could just use a flag to check, ie
var videoIsPlaying = false;
function playVideo () {
if(videoIsPlaying){
//dont play video
}else{
//play video and set to true
videoIsPlaying = true;
}
}
you'd have to set it on pause etc
document.getElementsByTagName() will return an array with all the video elements in it. To check if any of them is playing you need to loop through the array and check whether any video is playing:
var anyPlaying=false;
for(var i=0;i<myVideo.length;i++){
if(!myVideo[i].paused){
anyPlaying=true;
}
}
if(!anyPlaying){
//...
}else{
return false;
}

Can addEventListener to an audio tag for play, but not set an onplay function

This does not work:
document.getElementById("audio").onplay = function () {
alert("in");
};
Also tried to use "onPlay", same result.
However, this does work:
document.getElementById("audio").addEventListener("play", function () {
alert("in");
}, false);
Am I missing something here?
I think you have to switch between the "play and pause" states take a look here
http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/
It should fire the first time you play when using onplay but it won't fire after that
therefore you should create a button that toggles both states
var playpause = document.getElementById('playpause');
video.onpause = function(e) {
playpause.value = 'Play';
playpause.onclick = function(e) { video.play(); }
}
video.onplay = function(e) {
playpause.value = 'Pause';
playpause.onclick = function(e) { video.pause(); }
}

Categories