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>
Related
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")
);
I want that whenever anyone plays the audio then only gif play..
here what I tried...
number = 0;
var animations = ['https://static.wixstatic.com/media/6b2a99_687dc4cb09bc42bdb230d1c8ce7815a4~mv2.gif',
'https://static.wixstatic.com/media/6b2a99_687dc4cb09bc42bdb230d1c8ce7815a4~mv2.gif',
'https://static.wixstatic.com/media/6b2a99_687dc4cb09bc42bdb230d1c8ce7815a4~mv2.gif'
];
function character() {
image = document.getElementById('1BoXzCv8EbZ5BDnb47T31lPM1lKdne7wG');
image.src = animations[number];
}
<div class="board">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEhUIEQv7m_0HrLkcEDQURyV74eGEO8ZDW0LhhyFbK72BBXm9S0BolRB0V82i7RvX5S83j1QPOYazQlbUp8p9S5xSnlMNIpQGwJdKlmwCiPc8sHMqO8dPgYpstyejRK9rKeWNlofjOhTQGcfyk3Jt_1YqAezHYyRBDJiaGYD1R5O9mrdzaQKzDAc0Pe2oA=s16000" alt="cassete" width="300" height="200" id="1BoXzCv8EbZ5BDnb47T31lPM1lKdne7wG" onclick="character();"/>
<audio class="splplayer" controls="controls" id="audio_player" preload="metadata">
<source src="https://drive.google.com/uc?export=download&id=1BoXzCv8EbZ5BDnb47T31lPM1lKdne7wG"></source></audio></div>
Don't know where the error occurs.... here gif is playing on clicking on it not on clicking the audio play button
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();
}
How Do I make the event Click a button instead of inputting a URL... because the URL is never the same but the words Next Episode will always be there..
// Do not name the function "play()"
function playVideo(){
var video = document.getElementById('video');
video.play();
video.addEventListener('ended',function(){
window.location = 'http://www.google.com';
});
}
</script>
<video controls id="video" width="770" height="882" onclick="playVideo()">
<source src="video/Motion.mp4" type="video/mp4" />
</video>
Give your link an id:
<a id="some-id" href="LINK" title="episode name"><span>next episode</span> <i class="icon-chevron-right"></i></a>
Then change your event listener to this:
video.addEventListener('ended',function(){
document.getElementById('some-id').click();
});
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.