guys. Please explain this to me.
I wanted to create a single mute/unmute button for my page. (audio starts automatically)
So here the code I used first time:
<script>
var sound = getElementById (‘background_sound’);
function mute(){
if(background_audio.muted == false){
background_audio.muted = true;
} else {
background_audio.muted = false;
}
}
</script>
But it didn’t work. So I just removed the first line (I mean this var) and addressed the id directly. And it worked. Now my html looks like this:
<audio id="background_audio" autoplay="true" loop="loop">
<source src="Audio/flute.mp3">
If you are reading this, it is because your browser does not support the audio element.
</audio>
<button onclick="mute()">
<i class="fa fa-music"></i></button>
And javascript like this
<script>
function mute(){
if(background_audio.muted == false){
background_audio.muted = true;
} else {
background_audio.muted = false;
}
}
</script>
The question is how can I address Id directly without creating a variable? It works fine though but will I have any problems with the code later? I just thought I need to assign a var this to work. A bit confused.
try this i am sure this will work
<script>
function mute(){
if(document.getElementById('background_audio').muted == false){
document.getElementById('background_audio').muted = true;
} else {
document.getElementById('background_audio').muted = false;
}
}
</script>
Related
I would like to implement an audio player on all of my WordPress pages and therefore I need to create the HTML element with JS and manipulate it from there. Everything is working, except for when I press the play button, it redirects me to a new page with the audio link and plays it there. I would like to prevent that, so that I can play and stop it on the WP pages themselves and have the audio play in the background.
Any tips are greatly appreciated!
function addAudioPlayer() {
const audioPlayer = document.createElement("a");
audioPlayer.setAttribute("id", "audioPlayer");
audioPlayer.href =
"https://www.hostname.com/wp-content/uploads/2020/09/bird_sound.wav";
audioPlayer.setAttribute("data-id", "[data-song]");
audioPlayer.innerHTML = "▶";
Array.prototype.forEach.call(
document.querySelectorAll("[data-song]"),
function (song) {
song.audio = new Audio(song.href);
song.setAttribute("role", "button");
song.setAttribute("aria-pressed", "false");
}
);
document.addEventListener("click", function (event) {
if (!event.target.hasAttribute("data-song")) return;
event.preventDefault();
if (event.target.getAttribute("aria-pressed") == "true") {
event.target.audio.pause();
event.target.setAttribute("aria-pressed", "false");
return;
}
event.target.audio.play();
event.target.setAttribute("aria-pressed", "true");
},
false
);
document.body.appendChild(audioPlayer);
}
<div>
<audio id="myaudio" src="https://www.hostname.com/wp-content/uploads/2020/09/bird_sound.wav" controls="controls" preload="auto" hidden="true"></audio>
<input type="button" onclick="autoPlay()" value="Play"/>
</div>
<script language="javascript" type="text/javascript">
var myAuto = document.getElementById('myaudio');
function autoPlay(){
myAuto.play();
}
</script>
Posted some code earlier, and have tried to revamp it.. to no avail. The code below gives no errors, and I -think- (I am a complete newb) it should work, but I am not sure why it's not playing. I'm trying to make a soundboard for our D&D game. The code is a follows:
<html>
<body>
<audio id="heroic" src="heroic.mp3"></audio>
<button onClick="togglePlay()" id="heroicbutton">Heroic Battle Music</button>
<script>
//<!--Audio as variables-->
var audio1 = new Audio("heroic.mp3")
var isPlaying = false;
function togglePlay(){
if (isPlaying = true){
audio1.pause()
} else {
audio1.play();
}
};
audio1.onplaying = function () {
isPlaying = true;
}
audio1.onpause = function () {
isPlaying = false;
};
</script>
</body>
</html>
The file 'heroic.mp3' is in the same folder, and no errors appear on chrome's developer tools. I am not sure why nothing is playing.
You have actually made a simple mistake here.
Inside the if you should have comparison '==' not assignment '='
if (isPlaying == true){
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”
Sometimes when an error is detected I want my page to play a sound.
I made this javascript, it does not work:
function playsound(){
var obj = document.createElement("audio");
obj.setAttribute("src", "click.mp3");
obj.play();
}
if($('#noerrors').css('display') != 'none' ) {
playsound();
}
Why not?
I want to call playsound(); whenever it please me.
When using:
if($('#noerrors').css('display') != 'none' ) {
var obj = document.createElement("audio");
obj.setAttribute("src", "click.mp3");
obj.play();
}
It works fine. What's the problem of the first script?
http://jsfiddle.net/3Camg/
<div id="error_sound"></div>
<span class="click">Test Sound by clicking here</span>
function play_sound()
{
$('#error_sound').html('<audio src="http://www.intriguing.com/mp/_sounds/hg/dead.wav" id="err_player"></audio>');
document.getElementById('err_player').play();
}
$('.click').bind('click',play_sound);
You cannot call play on jQuery element, but the HTML element that underlies it.
Can I suggest you another solution?
Define <audio> just once at the beginning, then call play() by selecting that tag:
1.Insert this whenever you want, at the end of the <body> for example.
<audio id="myAudio" src="click.mp3"></audio>
2.Then if you have an error, play it or pause otherwise:
if($('#noerrors').css('display') != 'none' ) {
document.getElementById("myAudio").play();
} else {
document.getElementById("myAudio").pause();
document.getElementById("myAudio").currentTime = 0;
}
I suggest this solution (DEMO):
function playsound(){
var $audioElement = $("<audio id='audioId'/>");
$audioElement.attr('src', "click.mp3");
$audioElement[0].load();
$audioElement[0].play();
}
if($('#noerrors').css('display') != 'none' ) {
playsound();
}
To ensure to play after load:
$audioElement.on('canplay canplaythrough', function(){
$audioElement[0].play();
});
I've tried two different methods of toggling the play/pause button on my player, neither of which work on the first click, for some reason.
This one, supposedly checks the status of the audio to see if it's paused or ended:
function togglePlayPause() {
var audioPlayer = document.getElementsByTagName('audio')[0];
var playpause = document.getElementById("playpause");
if (audioPlayer.paused || audioPlayer.ended) {
playpause.title = "pause";
playpause.innerHTML = "pause";
}
else {
playpause.title = "play";
playpause.innerHTML = "play";
}
}
Or I've tried this one, which just toggles via the onClick toggle(this):
function toggle(obj) {
if (obj.className== 'playButton') {
obj.className = 'pauseButton';
obj.title = "PAUSE";
obj.innerHTML = "PAUSE";
} else {
obj.className = 'playButton';
obj.title = "PLAY";
obj.innerHTML = "PLAY";
}
}
Neither toggle the first time the button is clicked, although the first method does change from the default inner "PLAY" to "play", so I guess that's something:
<div title="play" class="playButton" id="playpause">PLAY</div>
In both methods, subsequent clicks work fine. Any idea why this is happening? Could it have something to do with the way the audioPlayer variable is called? The array starts from 0. (I'm clutching at straws.)
Many thanks as usual!
I would go without creating functions, I would check if the link is clicked then proceed to the events that would be fired.
so something like $("#start").click(function(){}); in can be tried.
First, have the jQuery library included in your HTML header.
Then create a new javascript file, included it as well (usually this is put after the jQuery included)
In your new javascript file write the following
$(document).ready(function() {
$("#start, #stop, #play, #pause").click(function() { //you can have more or less selectors (selectors are the ones with #)
//Your code goes here
});
});
Here is a fiddle for that solution. http://jsfiddle.net/JRRm2/1/ (tidier text: http://jsfiddle.net/JRRm2/2/)