I'm facing some issues with my play/pause buttons. In ym HTMl I have multiple buttons with different sources:
<div>
<button class="button-53" id="button">Play</button>
</div>
<audio id="player">
<source src='audio/mixdown.mp3' type='audio/mpeg'/>
</audio>
<div>
<button class="button-53" id="button">Play</button>
</div>
<audio id="player">
<source src='audio/mixdown2.mp3' type='audio/mpeg'/>
</audio>
This is my Javascript:
var buttons = document.getElementById("button");
var music = document.getElementById("player");
for (const buttons of button) {
buttons.addEventListener("click", function(){
if(music.paused){
music.play();
buttons.innerHTML = "Pause";
} else {
music.pause();
buttons.innerHTML = "Play";
}
});
}
But when I play music from the first button and then pause it, go over to the next button and toggle the button, the sound keeps playing from that point where I stopped it instead of playing the sound from the written source.
Anyone here that could help me?
Id attributes in HTML should be unique. The document.getElementById returns a single element (if found).
One solution to fixing your problem is to give each pair of button/audio elements different ids, for example:
<div>
<button class="button-53" id="button1">Play</button>
</div>
<audio id="player1">
<source src='audio/mixdown.mp3' type='audio/mpeg'/>
</audio>
<div>
<button class="button-53" id="button2">Play</button>
</div>
<audio id="player2">
<source src='audio/mixdown2.mp3' type='audio/mpeg'/>
</audio>
and then add event listeners for each pair:
function addListeners(buttonElement, audioElement) {
// ...add implementation
}
addListeners(
document.getElementById("button1"),
document.getElementById("player1")
);
addListeners(
document.getElementById("button2"),
document.getElementById("player2")
);
Related
I'm trying to add sound effects to my website, a positive one when they click on the correct image and a negative one when they click on the wrong image. At the moment only the negative sound gets played for both clicks, or depending on what order i put the sounds in, the positive one gets played.
This is my html:
<audio controls autoplay hidden id="correct">
<source src="positive.mp3" type="audio/mpeg">
</audio>
<audio controls autoplay hidden id="wrong">
<source src="negative.mp3" type="audio/mpeg">
</audio>
<div class="popup" onclick="myFunction(); playPositive()"> <img src="true.png">
<span class="popuptext" id="myPopup">CORRECT</span>
</div>
<div class="popup" onclick="myFunction(); playNegative()"> <img src="false.png"
<span class="popuptext" id="myPopup">INCORRECT</span>
</div>
And this is my Javascript:
var myMusic= document.getElementById("correct");
function playPositive() {
myMusic.play();
}
var myMusic= document.getElementById("wrong");
function playNegative() {
myMusic.play();
}
Why does it only use the second sound for both function, even when I click on right image and wrong image?
that is because you are using the same variable name for both audio elements:
fix it like this:
var myCorrectMusic= document.getElementById("correct");
function playPositive() {
myCorrectMusic.play();
}
var myWrongMusic= document.getElementById("wrong");
function playNegative() {
myWrongMusic.play();
}
I have a div that inside of it has a <video autoplay> <source src='myvid'> </video> and by default the div has a display ='none' on css. I am adding an event listener of click on the div and once its clicked i am changing the display none to display block.
the problem is that the video plays automatically when the site reloads and not when the button is clicked. basically i want the video to play only when the div is display ='block'. How can i do that in Javascript?
Remove the autoplay attribute
Use JavaScript to play the video using a custom button and the .play() method
<video id="video"> <source src='myvid'></video>
<button id="play">PLAY</button>
document.querySelector("#play").addEventListener("click", () => {
document.querySelector("#video").play();
});
If you don't want a custom button (not clear from your question) than you could provide the browser default by using the controls attribute
const EL_video = document.querySelector("#video");
const EL_play = document.querySelector("#play");
EL_play.addEventListener("click", () => {
const isPaused = EL_video.paused;
EL_video[isPaused ? "play" : "pause"]();
EL_video.classList.toggle("u-none", !isPaused);
});
#video {width: 300px;}
/* Utility classes: */
.u-none {display: none;}
<button id="play">Toggle & play</button><br>
<video id="video" class="u-none">
<source src='http://vjs.zencdn.net/v/oceans.mp4' type='video/mp4'>
</video>
try addind an onclick attribute to the div like this:
<div onclick="play_video();">
Or you can create a button:
<button onclick="play_video();">play the video</button>
Then, create the javascript function like this:
function play_video()
{
document.getElementById("id_of_the_video").play();
}
I have an audio file called sound.wav that is 14 seconds long. When a user clicks a button, sound.wav source url is changed and sound.wav is reloaded and is now 7 seconds long.
However, my browser does not display the changes. Only after clicking the refresh button does it display the changes.
Here is my code:
<div id="audioContainer">
<audio id ="myAudio" controls>
<source id = "wav_src" src="http://localhost:3000/sounds/sound.wav" type="audio/wav">
</audio>
</div>
//user clicks button... sound.wav's url source is changed
document.getElementById("myAudio").load(); //code to reload the sound.wav
As you can see, I'm reloading the html audio element for sound.wav after the user presses a button. However, the sound file remains unchanged on the website, unless I hit refresh.
How do I fix this?
When you change the src of the <source> element, it doesn't change the src of the its parent MediaElement (<audio> or <video>). You have to call this MediaElement's .load() method :
set_src.onclick = function() {
source.src = 'http://cdn.music2ten.com/mp3/pd4u/GershwinWhiteman-RhapsodyInBluePart1.mp3';
console.log('source src:', source.src);
setTimeout(function(){console.log('audio src:', audio.currentSrc)});
}
load_btn.onclick = function() {
audio.load(); // you must call this
setTimeout(function(){console.log('audio src:', audio.currentSrc)});
};
<audio id="audio" controls="controls">
<source id="source">
</audio>
<br>
<button id="set_src">set src</button>
<button id="load_btn">load</button>
Of course you would normally do this in one-go:
set_src.onclick = function() {
source.src = 'http://cdn.music2ten.com/mp3/pd4u/GershwinWhiteman-RhapsodyInBluePart1.mp3';
audio.load(); // you must call this
}
<audio id="audio" controls="controls">
<source id="source">
</audio>
<br>
<button id="set_src">set src</button>
I'm trying to start and stop two videos with two separate buttons. I've simply copied the code and renamed the variables, yet one piece of code works and one doesn't. I get the error 'TypeError: video2.pause is not a function at HTMLButtonElement.c'. Both videos and buttons are placed in modals respectively. Why am I getting this weird error, especially when exactly the same code works?
Javascript:
var video = document.getElementById("video.mp4");
var playButton = document.getElementById("play-pause");
var video2 = document.getElementById("video2.mp4");
var play = document.getElementById("play-pause2");
playButton.addEventListener("click", function a () {
if (video.paused == true) {
video.play();
playButton.innerHTML = "Pause";
} else {
video.pause();
playButton.innerHTML = "Play";
}
});
play.addEventListener("click", function c () {
if (video2.paused == true) {
video2.play();
play.innerHTML = "Pause";
} else {
video2.pause();
play.innerHTML = "Play";
}
});
HTML:
<video width="900px" height="600px" id="Digital_Poster.mp4" />
<source src="assets/video.mp4" type="video/mp4" id="video.mp4"/>
Sorry, this browser does not support the 'video' tag.
</video>
<div id="video-controls">
<button type="button" id="play-pause">Play</button>
</div>
<video width="900px" height="600px">
<source src="assets/video2.mp4" type="video/mp4" id="video2.mp4"/>
Sorry, this browser does not support the 'video' tag.
</video>
<div id="video-controls">
<button type="button" id="play-pause2">Play</button>
</div>
You should call .pause on the <video> elements, but the id is set on the <source> ones. Moving it to the <video> tags should make it work:
<video width="900px" height="600px" id="video.mp4">
<source src="assets/video.mp4" type="video/mp4" />
Sorry, this browser does not support the 'video' tag.
</video>
<div id="video-controls">
<button type="button" id="play-pause">Play</button>
</div>
<video width="900px" height="600px" id="video2.mp4">
<source src="assets/video2.mp4" type="video/mp4" />
Sorry, this browser does not support the 'video' tag.
</video>
<div id="video-controls">
<button type="button" id="play-pause2">Play</button>
</div>
By the way, I've corrected the /> to > in the first line. Also, declaring two elements with ID set to video-controls is illegal, consider using HTML classes (thanks #zer00ne for pointing out).
How can i play audio on my web (even for mobile) by Java script but just put Js code one times in .tpl file. I use NukeViet CMS, if i use the code below for each audio my web will hardly load.
var audioTagged = document.getElementById('audioID');
audioTagged.src = 'http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/straight.mp3';
audioTagged.load();
<p onclick="triggerAudio()"><img src="http://caicay.vn/uploads/news/loa.gif" /></p>
I want to put js code one times in header tag and for each audio i just insert code like this <span class="uba_audioButton" media-url="http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/straight.mp3"></span> in editor.
I want to play audio code like http://www.tienganh123.com/tieng-anh-pho-thong-lop-8-bai-1/2604-vocabulary.html , the image hasn't to change when clicking on the bottom, just simply click-play then click-pause.
Use Audio class of JavaScript.
Check out this fiddle.
Here is the snippet.
function triggerAudio() {
var file = new Audio('http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/straight.mp3');
file.play();
}
<p onclick="triggerAudio()">
<img src="http://caicay.vn/uploads/news/loa.gif" />
</p>
According to the requirement mentioned in the comments by the OP, this might solve the problem.
Check out this updated fiddle.
Here is the snippet.
function triggerAudio(abc) {
var playid = abc.id.substring(4);
document.getElementById("audio" + playid).play();
}
audio {
display: none;
}
<p id="play1" onclick="triggerAudio(this)">
<img src="http://caicay.vn/uploads/news/loa.gif" />AFFECT</p>
<p id="play2" onclick="triggerAudio(this)">
<img src="http://caicay.vn/uploads/news/loa.gif" />ANNOY</p>
<p id="play3" onclick="triggerAudio(this)">
<img src="http://caicay.vn/uploads/news/loa.gif" />BALD</p>
<p id="play4" onclick="triggerAudio(this)">
<img src="http://caicay.vn/uploads/news/loa.gif" />BLOND</p>
<p id="play5" onclick="triggerAudio(this)">
<img src="http://caicay.vn/uploads/news/loa.gif" />CHARACTER</p>
<audio id="audio1">
<source src="http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/affect.mp3" type="audio/mp3" />
</audio>
<audio id="audio2">
<source src="http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/annoy.mp3" type="audio/mp3" />
</audio>
<audio id="audio3">
<source src="http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/bald.mp3" type="audio/mp3" />
</audio>
<audio id="audio4">
<source src="http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/blond.mp3" type="audio/mp3" />
</audio>
<audio id="audio5">
<source src="http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/character.mp3" type="audio/mp3" />
</audio>
This solution contains very little Javascript which you don't need to write separately for every audio you want to play.
Add as much <audio> you need in the HTML part and this will still work for you.
If the CMS you are using do not allow onclick trigger, then you can register event listeners using javascript.
var elements = document.getElementsByTagName("p");
for(i = 0; i < elements.length; i++) {
elements[i].addEventListener("click", function() {
triggerAudio(this);
});
}
Here is the fiddle with event listeners registered using javascript.