How can I change a AudioFile on a button click?
First Audiofile should start onLoad and when clicked change to second file. Player shoulden't be Visible.
If possible please answer in JavaSript!
Actually it's so simple :)
Just call a javascript function on a onClick event of a button.
//demo.html
<script>
var url = "mymusic.mp3";
function changeURL(){
document.getElementByIde('audio1').src = url;
}
</script>
<audio id="audio1" autoplay src="my.mp3"></audio>
<button onclick="changeURL()">Change Audio</button>
In the example, the function changeURL() will be call when we click on Change Audio Button.
Try this:
var url = "http://hydra-media.cursecdn.com/dota2.gamepedia.com/e/e5/Invo_laugh_07.mp3";
document.getElementsByTagName('button')[0].onclick = function() {
document.getElementsByTagName('audio')[0].src = url;
};
<audio autoplay src="http://hydra-media.cursecdn.com/robocraft.gamepedia.com/c/c6/BattleLoop.mp3"></audio>
<button>button</button>
Related
Trying to make my own play button
Audio loads and plays fine with the HTML Audio Tag
Error console says "Fails to load resource https://open.scdn.co/static/embed.2019-03-05_152e14cd.js.map"
song.play(); typed into JS console works fine
Button does not activate function!
HTML
<audio id="song" controls> <source src="song.mp3"></source>
</audio>
<button class="controls" id="play">Play</button>
JavaScript
var play = document.getElementById("song");
song.addEventListener ("click", buttonActions);
function buttonActions(event){
song.play();
}
You're attaching the event handler to the <audio> element, instead of the <button> element.
Instead of:
var play = document.getElementById("song");
song.addEventListener ("click", buttonActions);
function buttonActions(event){
song.play();
}
It should be:
var play = document.getElementById("play");
play.addEventListener ("click", buttonActions);
function buttonActions(event){
var song = document.getElementById("song");
song.play();
}
I want to let audio play in the background, but I don't want it to start while
the page loads. Can I delay it with CSS or JS? Is this possible?
I now got this, but it still doesn't work. I think it is supposed to work.
Google Chrome shouldn't matter either right?
<audio id="audioID"
src="spraakbericht.m4a"
style="display:none/*or you can use visibility:hidden*/"></audio>
<script>
var myAudio = document.getElementById("audioID");
window.onload = function() {
setTimeout(function(){
myAudio.play();
}, 3000); // you can change this... whatever you want //
}
</script>
Hope you can help!
Yes. You can easily achieve the same using some JS.
Place audio div tag somewhere in your page. ex- div id="audio"
Execute code when you want like on button click or automatically after 30 sec or 2 minutes using setTimeout.
setTimeout( () => {
document.getElementById('song').innerHTML = 'audio id="audio-player" controls="controls" style="display: none" src="media/Blue Browne.mp3" type="audio/mpeg"';
}, (millisecond));
Note to add markup tag as I removed in the example as it's not supporting here.
Yes this is possible. You can use setTimeout function like this:
<audio controls="controls" onloadeddata="var audioPlayer = this; setTimeout(function() { audioPlayer.play(); }, 3000)">
<source src="music.mp3" type="audio/mp3" />
</audio>
For background audio:
var myAudio = document.getElementById("audioID");
window.onload = function() {
setTimeout(function(){
myAudio.play();
}, 3000);
}
EDIT Here is a working example for you:
<audio id="audioID"
src="http://a.tumblr.com/tumblr_leltkjNwWL1qf32t9o1.mp3"
style="display:none/*or you can use visibility:hidden*/"></audio>
<script>
var myAudio = document.getElementById("audioID");
window.onload = function() {
setTimeout(function(){
myAudio.play();
}, 3000); // you can change this... whatever you want //
}
</script>
I found This to use but how can i make the id to tally with each music query from the database
var myAudio = document.getElementById("myfile");
function togglePlay() {
return myAudio.paused ? myAudio.play() : myAudio.pause();
};
<audio id="myfile" src="/musicfile/{{$ebeat->beat}}" preload="auto"></audio>
<a onClick="togglePlay()">{{$ebeat->title}}</a>
Given that you're repeating the same pair of elements throughout the DOM it would make more sense to make the code generic. To do that use DOM traversal to get the previous sibling audio element to the clicked a element. To do that you can use the previousSibling from the reference to the clicked element:
function togglePlay(el) {
var audio = this.previousSibling;
return audio.paused ? audio.play() : audio.pause();
};
<audio id="myfile" src="/musicfile/{{$ebeat->beat}}" preload="auto"></audio>
<a onClick="togglePlay(this)">{{$ebeat->title}}</a>
Alternatively, as you tagged the question with jQuery, you can use prev(), like this:
$(function() {
$('a.togglePlay').click(function(e) {
var audio = $(this).prev()[0];
return audio.paused ? audio.play() : audio.pause();
});
});
<audio id="myfile" src="/musicfile/{{$ebeat->beat}}" preload="auto"></audio>
{{$ebeat->title}}
I have a small jQuery function to play audio when a user clicks the link. I don't need any controls, they are short samples. I just want to play anytime a user clicks. Here is the html for the section that should play;
</div class="classicalRecordings">
Open song
</div>
Then this is the jQuery to play the sound;
function playMusic(){
var audioElement = document.createElement('audio');
var audioElementSrc = $(this).attr('data-audio-src');
audioElement.setAttribute('src', audioElementSrc);
$.get();
audioElement.addEventListener("load", function(){
audioElement.play();
}, true);
}
$(function(){
$('.play').click(playMusic);
});
It doesn't seem to work. I think it has to do with the src variable, I am not sure I am passing it to the audioElement correctly. I have tested using an alert to be sure I am grabbing the data-audio-src correctly. Any help is appreciated.
I think that the event you're looking for is the loadeddata event.
function playMusic(){
var audioElement = document.createElement('audio');
var audioElementSrc = $(this).attr('data-audio-src');
audioElement.setAttribute('src', audioElementSrc);
$.get();
// changed "load" t0 "loadeddata"
audioElement.addEventListener("loadeddata", function(){
audioElement.play();
}, true);
}
$(function(){
$('.play').click(playMusic);
});
Although you could probably be better off having a static audio element and changing the src attribute on user clicks rather than creating a new audio element.
// example
var audio = document.getElementsByTagName('audio')[0];
audio.addEventListener('loadeddata', function() {
this.play();
}, true);
function playMusic() {
var audioElementSrc = $(this).attr('data-audio-src');
audio.setAttribute('src', audioElementSrc);
};
$('.play').click(playMusic);
There is a framework for this that is worth checking out. ListenJS. I wrote it :)
Try something like this:
<audio id="sound">
<source src="music/classical/open.mp3" type="audio/mpeg">
</audio>
And from code:
$(function(){
$('#sound').get(0).play();
});
I have a playlist page, which works out fine on the computers. Unfortunately on android, when I click the start button, then the stop button, it's stays orange and does not change the track!
I'm assuming the button tag on android is waiting for something back?
Also, the src updating is not working on android.
Here is my javascript:
function Stop ()
{
var audie = document.getElementById("myAudio");
audie.pause();
}
function Start ()
{
var audie = document.getElementById("myAudio");
audie.src = ("new link");
audie.play();
}
and here is the HTML:
<audio id="myAudio" onended="Start()"></audio>
<button type="button" onclick="Start()">Start</button>
<button type="button" onclick="Stop()">Stop</button>
Try this instead:
var audie = document.getElementById("myAudio");
function Stop ()
{
audie.muted = true;
}
function Start ()
{
audie.src = ("new link");
audie.muted = false;
audie.currentTime = 0;
}
I think audio.pause stops the download of a song. Please correct me if I am wrong.