Before I ask my question I just wanted to say that I'm a noob to Javascript and to StackOverflow in general so I wanted to apologize in advance if this question is too dumb.
Anyways, I'm learning Javascript and right now I'm experimenting with currentTime, but for some reason song.currentTime is returning undefined, and I also can't set the currentTime. Here is my code:
<audio autoplay>
<source src="A.mp3" type="audio/mpeg" id="awesomeness">
Your browser does not support the audio element.
</audio>
<script type="text/javascript">
function myFunction(){
console.log("letting everything preload by waiting 2 seconds");
var song= document.getElementById("awesomeness");
console.log(song.currentTime);
song.currentTime=30;
}
</script>
Here it is in action (look at the console output): http://dancingcats.azurewebsites.net/
The currentTime property belongs to the audio element(Media)
You need is to set it to the audio element not to the source element
<audio autoplay id="awesomeness">
<source src="A.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Related
And if it stops it won't autoplay on reload or opening the site like it should. Once it has stoped it won't even work when i restart the localhost server again. I uploaded my files to github to test if it is something with my local server. So the problem still appears and i have no clue how to solve it since autoplay is active. If someone could help out i would appreciate that. Thanks in advance !
I changed autoplay and loop in the index file to autostart="true" didn't work either so i sticked to autoplay loop. i added buttons to stop the audio if anybody wants to.
<audio id="background-audio" class="background-audio" autoplay loop >
<source class="background-audio" type="audio/mpeg" src="audio/videoplayback7.m4a">
</audio>
var audio = document.getElementById("background-audio")
function belltwo() {
audio.play();
}
function bellthree() {
audio.pause();
}
website link : https://depressedunicorn.github.io/NiRiN/ if you want to test out the problem yourself
yeah already found the solution ^^ but only works on localhost server now: i can now stop the audio restart the page and it will autoplay everytime. but not on github page maybe it takes time for the changes to take effect.
<audio id="background-audio" class="background-audio" autoplay="autoplay" loop="loop">
<source type="audio/mpeg" src="audio/videoplayback7.m4a">
</audio>
<video id="background-video" class="background-video" allowfullscreen="true" muted="true" autoplay="autoplay" playsinline="playsinline" loop="loop">
<source src="/img/beepleloops/beepleDnB93.mp4" type="video/mp4">
I have a javascript code like below:
<script type="text/javascript" charset="utf-8">
function addmsg(count, play){
if(play == 'true')
{
$("#my_audio").get(0).play();
}
}
</script>
<html>
<audio id="my_audio" src="popsound.mp3"></audio>
</html>
In the above code "play" variable is like a flag containing true or false value, and it plays the sound when play=='true'.The above code is working fine on my laptop browser,but when I'm accessing the page through my mobile the sound doesnt gets played. I did some research but I'm unable to figure out how to do it in my case. I'm very new to this field so sorry if this question is senseless, but can any one please help me. I wanted to make it work fine for mobile browser's too.Thank you in advance.
You need to put different formats for all devices (.ogg and .mp3).
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Source : http://www.w3schools.com/html/html5_audio.asp
I'm still not really 'good' with Javascript and jQuery but I'm learning. The following, however, puzzles me:
I have a standard HTML5 video tag:
<video id="videoclip">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
Now I need to change to video src via jQuery. If I only have ONE source i.e.
<source id="mp4" src="video.mp4" type="video/mp4">
I just do THIS:
function changeVideo() {
var newVideo = "new_video.mp4";
$("#videoclip").attr("src",newVideo) }
(I abbreviated this snippet. I actually have quite a few variables and things that happen set up there).
So this works well. But what do I need to do if I have TWO sources as in the very first code segment? An alternative webm file?
I tried giving the two source tags different IDs like so:
<source id="mp4" src="video.mp4" type="video/mp4">
<source id="webm" src="video.webm" type="video/webm">
and then did this:
function changeVideo() {
var newVideo = "new_video.mp4";
var newVideo2 = "new_video.webm";
$("#mp4").attr("src",newVideo);
$("#webm").attr("src",newVideo2)
Doesn't work. I mean it DOES the first time I play the video but when I use another similar function to change the sources yet again it won't work. It will be the same source set in the first place. It won't budge. :(
Everything I wrote over the last hours works perfectly now with this exception.
How do I get past this exception?
You need to add this in the changeVideo function:
$("#videoclip")[0].load();
$("#videoclip")[0].play();
I'm trying to get a sound looped on html 5. The sound.loop = true; works, but when the sound get finished, there's a silence between looping. How can I avoid that? Thanks a lot, here's the code:
<audio id="ruido">
<source src="ruido.ogg" type="audio/ogg">
<source src="ruido.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<script>
var sound = document.getElementById("ruido");
sound.loop = true;
sound.play();
</script>
You could use a JavaScript function to loop when an 'ended' event is called.
<audio id="loopMe" controls preload>
<source src="ruido.ogg" type="audio/ogg">
<source src="ruido.mp3" type="audio/mpeg">
</audio>
document.getElementById('loopMe').addEventListener('ended', function(){
this.currentTime = 0;
this.play();
}, false);
Or better yet try the SeamlessLoop library, Reproduce seamless/gapless audio loops on HTML5/JavaScript without specific browser Audio APIs.
I am new on HTML5, What I want to do is get the audio duration time when I click the pause button
here is my code
<audio controls="" id="audio">
<source src="assets/record_file/abc.mp3" type="audio/ogg">
<source src="assets/record_file/abc.mp3" type="audio/mpeg">
Your browser does not support the audio element. Please try other latest browser
</audio>
any idea how to do it ?
thanks
document.getElementById('audio').pause = function() {
var currentTime = document.getElementById('audio').currentTime;
var duration = document.getElementById('audio').duration;
alert(currentTime);
};
Please check HTML Audio and Video DOM Reference, describe all methods, properties and events.