This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
HTML5 audio element with dynamic source
I'm trying to get the player to reload a new track once the current one ends, but I think I might have done something wrong.
This is the player:
<audio id="audio" autoplay controls="controls" onclick="start()">
<source src="song.php" type="audio/mpeg" />
</audio>
Here's the script:
function start(){
var audio = document.getElementById('audio');
audio.play();
audio.addEventListener('ended',function(){
$.post("song.php", function(result){
audio.src = result;
audio.pause();
audio.load();
audio.play();
});
});
}
If I change the script to this, it works...but I don't want to reload the whole page:
function start(){
var audio = document.getElementById('audio');
audio.play();
audio.addEventListener('ended',function(){
window.location = 'player.html';
});
}
For starters, you are attaching a new event handler every single time the element is clicked. If someone frequently pauses the music, they will run into problems.
Intead, try this:
<audio id="audio" autoplay controls src="song.php" type="audio/mpeg"></audio>
<script type="text/javascript">
document.getElementById('audio').addEventListener("ended",function() {
this.src = "song.php?nocache="+new Date().getTime();
this.play();
});
</script>
I'm assuming that song.php is a PHP file that returns the audio data. The nocache query parameter will ensure that the file is actually called every time.
Related
I have a <div onclick="startSound"> in HTML. When clicked, it triggers a sound. How can I make it stop the first sound and play another one when clicked again? Most solutions I found use the <audio> HTML tag, but since there is none, how to do it?
function startSound() {
var musicPlay=new Audio('sound.mp3');
musicPlay.play();
}
You should have a single audio element, every time you click on a certain element, instead of creating a new Audio component, change the src property of the existing Audio component.
To stop the existing Audio that is in playing state, sound.pause();sound.currentTime = 0; would help.
let myAudio = document.getElementById('myAudio');
function startSound() {
myAudio.pause();
myAudio.currentTime = 0;
myAudio.src = 'sound.mp3';
}
<audio controls id="myAudio">
<source src="anotherSound.mp3" type="audio/mpeg">
</audio>
Here is an example code:
Link 1
Link 2
Link 3
<audio>
<source src="https://sporedev.ro/pleiade/sounds/swoosh-enter.mp3" type="audio/mpeg">
</audio>
Here is a fiddle with the example code that I provided:
https://jsfiddle.net/qkuLkqao/2/
All the examples that I found use mouseover, my version would be simpler than this, playing a sound file when the user clicks on a certain link.
How can I achieve this?
I did some research on SO and Google but I couldn't find anything related (most probably I didn't searched correctly).
You can use js to manipulate the audio element...
let audio = document.getElementById("audio");
let link = document.getElementById("audioLink");
link.onclick = () => {
audio.play();
};
<a id="audioLink" href="#">Link 1</a>
Link 2
Link 3
<audio id="audio">
<source src="https://sporedev.ro/pleiade/sounds/swoosh-enter.mp3" type="audio/mpeg">
</audio>
Take in to consideration that a link element is not mean to be a audio button.. you can use a button element instead..
Please try that.
document.querySelectorAll('a')[0].addEventListener('click', player, false)
function player() {
document.querySelector('audio').play()
}
This is made to play on Link 1.
You can declare use onclick on a tag and call a function to play the file.
Note. You can add the src path of the audio file as any data property in a tag and use it to play the related audio file
function playThis (el) {
if(window.audio) {
audio.pause();
}
window.audio = new Audio (el.getAttribute("data-src"));
window.audio.play();
}
Link 1
Link 2
Link 3
var links = document.getElementsByTagName('a'),
audio = document.getElementById('a-on-click'),
clickHandler = function () {
audio.play();
}
;
for (var i in links) {
links[i].addEventListener('click', clickHandler);
}
https://jsfiddle.net/qkuLkqao/14/
I have the following line:
<embed src="/sounds/move.wav" autostart="0" width=0 height=0 id="move_sound" enablejavascript=true>
Which autoplays the song on Chrome regardless of any parameters I play with (autoplay, etc.).
Anyone know how to stop it from playing?
EDIT: Not the same as the above, I'm dealing only with embed tags and not video tags.
Try using an audio tag:
<audio src="/sounds/move.wav">
Your browser does not support the <code>audio</code> element.
</audio>
This tag will not autoplay the sound.
You could set src to empty string
var embed = document.getElementById("move_sound");
var audio = embed.src; // save `src`
embed.src = "";
Not really sure but maybe you could stop the audio from playing. with a function you call everytime you switch the src?
http://www.w3schools.com/tags/av_prop_currenttime.asp
Like this?
function start(){
var embed = document.getElementById("move_sound");
//load the video etc.
embed.currentTime = 0;
embed.pause();
}
function playPause() {
if (embed.paused)
embed.play();
else
embed.pause();
}
While a video is playing I can't get the HTML5 player to play a different video, I tried changing the source.src but then it doesn't change the actual video to playing a different file.
How do I get the video to actually go to the next video?
This is the part of the code that's not working:
Javascript:
function change(s){
srs=document.getElementById('source');
srs.src="";
srs.src=s;
video.pause();
video.currentTime=0;
video.play();
}
HTML:
<video id='video'>
<source id='source' src="file:///C:/Users/Ruurd/Music/Far%20East%20Movement%20-%20Turn%20Up%20The%20Love%20ft.%20Cover%20Drive.mp3" >
</video>
PS: This doesn't actually have to work online, i just want to make a video/audio player for myself
After you set the src property, call video.load().
Actually, if you're only going to have one single source (presumably, because you know you're going to be using a browser that will play mp3), then you can just simplify and set the src property on the video tag itself.
HTML:
<video id="video" src="file:///C:/Users/Ruurd/Music/Far%20East%20Movement%20-%20Turn%20Up%20The%20Love%20ft.%20Cover%20Drive.mp3"></video>
Javascript:
var video = document.getElementById('video');
function change(s){
video.pause();
video.src = s;
video.load();
video.currentTime = 0;
video.play();
}
I'm trying to figure out how to trigger playing an audio from javascript. I got some html which looks like:
<div class='audio' >foo
<audio preload='auto' controls src='test.wav'>
<b>Your browser does not support the audio tag.</b>
</audio>
</div>
And I'm trying to trigger it with:
$(document).ready(function () {
$('.audio').each(function(){
var audio = $(this).find('audio').get();
$(this).click(function(){
audio.volume = 100;
alert('1 '+audio);
audio.play();
alert('2');
});
});
});
alert('1 '+audio); works as expected and reports audio as HTMLAudioElement. However alert('2'); is not called because I get the error 'audio.play' is not a function. What can I do to solve this problem?
Your code looks perfect. What is the error you are getting is it "alert.play" is not a function or "audio.play" is not a function.
I think
var audio = $(this).find('audio').get();
returns an array try this
var audio = $(this).find('audio').get(0);
Controlling audio without jQuery using just JavaScript is even easier if you give the audio tag an ID:
<audio id="myAudioTagID" type="audio/mpeg" src="sound.mp3"></audio>
then you can simply get the element and apply .pause(), .start(), stop() :
var audio = document.getElementById("myAudioTagID");
audio.play();
audio.pause();
audio.stop();