Consider a simple `HTML5 audio player as (live example)
<audio controls>
<source src="https://hpr.dogphilosophy.net/test/flac.flac" type="audio/flac">
</audio>
<br />
<dic class="capture">
Click here to get the current played time (elapsed time)
</dic>
Can we create a javascript event to catch the elapsed time of the playing audio by clicking on an HTML element?
Use currentTime to get the current timestamp, e.g.:
var audio = document.getElementById("audio-element");
document.getElementById('capture').addEventListener('click', () => {
console.log(audio.currentTime);
});
<audio id="audio-element" controls>
<source src="https://hpr.dogphilosophy.net/test/flac.flac" type="audio/flac">
</audio>
<br />
<button id="capture">
Click here to get the current played time
</button>
I believe HTML audio has a built in currentTime property that you could use to get the point in the audio where you're currently at:
https://www.w3schools.com/tags/av_prop_currenttime.asp
Is this what you're looking for?
Related
i need help in php website.i am create website like online videos courses.i need help in video module.if playing any video and close it after some time and again play this video then need to play it where it can be stop or closed.
This video are getting from database not embedded video.for showing video i am using afterglow video player.
<video class="afterglow" id="myvideo" height="385px" width="770px">
<source type="video/mp4" src="adminpanel/video/<?php echo $results->c_video; ?>" />
</video>
Is there any script to solve this problem.
As suggested in the comments you have to save the position of your video somewhere. The most simple approach would be to use the localStorage. You can read more about localStorage in the official documentation: https://developer.mozilla.org/de/docs/Web/API/Storage
While the video is played the timestamp gets refreshed each second and the localStorage item is updated.
Then if you reload the page (remember: item still exists in the storage after a refresh) you check for its existence and set the video to the timestamp.
This should point you in the right direction.
let video = document.getElementById("example");
if (localStorage.hasOwnProperty("time")) { //if time was set before adjust the video to it
video.currentTime = localStorage.getItem("time");
}
let timer = setInterval(getTimestamp,1000);
function getTimestamp(){
localStorage.setItem("time", video.currentTime);
console.log(localStorage.getItem("time"));
}
<video id="example" width="320" height="240" controls>
<source src="yoursourcefile" type="video/mp4">
</video>
I am building a php page that generates html5 audio elements from an rss feed.
<? foreach($tracks as $track){ ?>
<audio controls >
<source src="<?= $track['track_url'] ?>" type="audio/mpeg">
<source src="<?= $track['track_url'] ?>" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<? } ?>
There are about 300 tracks in this case so I do not load them all at once (the above code is to illustrate the concept).
I load a few tracks initially, then load additional tracks as the user scrolls down.
You can check out the page here: http://canneconomy.com/podcast
The first few tracks load and play without issues. However, after 10 or so tracks are loaded, the user is no longer able to play the HTML5 audio elements. I believe this is because all of the sockets are occupied and no more can be used.
My proposed solution is to prevent the HTML5 audio elements from automatically reserving sockets as they are generated and manage this process manually. A socket would only be used when a user clicks the play button. Hitting another play button would free all sockets and occupy only one.
How would one go about managing socket connections manually? This is a PHP/jQuery app.
You can achieve your desired behaviour by adding preload="none" to each audio item which will prevent the initial download of the file until a user clicks on the play button.
Also from looking at your source your attempting to stop the player above when the user plays the next item onplay="stop('trk2',300)", but that's a little optimistic that the user will traverse down the list instead of skipping a couple etc.
You can fix this issue by listening for a play event and then iterating over all players, then pausing them if it's not the target player.
A couple of very simple changes, for example:
<audio controls preload="none" id="trk1" class="ht5player" style="width:100%">
<source src="http://traffic.libsyn.com/canneconomy/Paul_Final_-_12_15_17_1.55_PM.mp3?dest-id=271554" type="audio/mpeg">
<source src="http://traffic.libsyn.com/canneconomy/Paul_Final_-_12_15_17_1.55_PM.mp3?dest-id=271554" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<audio controls preload="none" id="trk2" class="ht5player" style="width:100%">
<source src="http://traffic.libsyn.com/canneconomy/Lori_Final_-_12_15_17_12.19_PM.mp3?dest-id=271554" type="audio/mpeg">
<source src="http://traffic.libsyn.com/canneconomy/Lori_Final_-_12_15_17_12.19_PM.mp3?dest-id=271554" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<audio controls preload="none" id="trk3" class="ht5player" style="width:100%">
<source src="http://traffic.libsyn.com/canneconomy/Sabrina_Final_-_12_13_17_5.03_PM_1.mp3?dest-id=271554" type="audio/mpeg">
<source src="http://traffic.libsyn.com/canneconomy/Sabrina_Final_-_12_13_17_5.03_PM_1.mp3?dest-id=271554" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<script type="text/javascript">
document.addEventListener('play', function(e){
var audio_elms = document.getElementsByTagName('audio');
for (var i = 0, length = audio_elms.length; i < length; i++) {
if (audio_elms[i] != e.target) {
audio_elms[i].pause();
}
}
}, true);
</script>
^^^ run the snippet to see it in action.
I want to display a video on a page which starts at a certain position (e.g., 10 seconds). I have found a way to program this with the code below.
My problem is that it takes the browser several seconds to start the video. As far as I have read, the browser needs to load the duration of the video before it can play it at the certain position.
Is there some way to start the video immediately without any delay?
This is my code:
HTML
<video style="display:block; margin: 0 auto;" width="512" height="288" id="vid1" autoplay>
<source src="video.ogg" type="video/ogg" />
<source src="video.webm" type="video/webm" />
</video>
Javascript
document.getElementById('vid1').addEventListener('loadedmetadata', function() {
this.currentTime = 10 ;}, false)
I would be very thankful for every hint!
Thanks in advance!
I won't have enough have the reputation to comment so posting as an answer.
Have you tried to put ??
document.getElementById("vid1").load();
This load() method is used to load/update the video.
I have a simple angular application that has an audio player integrated.
<audio id="passage-audio" class="passage" controls ontimeupdate="document.getElementById('tracktime').value = this.currentTime ;">
<source src="Luke.2.1-Luke.2.20.mp3" type="audio/mp3">
<em class="error"><strong>Error:</strong> Your browser doesn't appear to support HTML5 Audio.</em>
</audio>
the audio player has an event called "ontimeupdate", this will update the time in the html element with the id "tracktime". This works fine.
What i would like to do is to use "ontimeupdate" to invoke a function in the controller. Right now it is not has access to the class.
<audio id="passage-audio" class="passage" controls (ontimeupdate)="updateTime()">...
</audio>
I there a way to accomplish this?
If i write an audio directive will i be able to access this event?
Thanks
Try <audio ... (timeupdate)="updateTime()">
Not sure what you want, but if it is to update you angular app at each timeupdate, you can accomplish this by calling $scope.$apply() and passing a $scope function.
this is working fine for me
function onChangeAudio(event) {
var durration = event.srcElement.duration;
alert("call")
}
<audio controls class="w-100" id="audio" (timeupdate)="onChangeAudio($event)">
<source src="..." type="audio/ogg">
<source src="..... " type="audio/mpeg">
Your browser does not support the audio element.
</audio>
I have a problem with getting sound to play and pause within my JS and HTML code.
I have a function that takes the two tracks inputted, pauses one, and plays another, for use to create dynamic music based on where the user is or what it is doing. However when the function is called, neither track is played or paused. I've looked up online to make sure that I'm using the proper audio formatting and from my research I have been. I'm currently stumped as to why this isn't working so a fresh set of eyes may help to figure out the problem.
My Javascript:
function playTrack(musicon, musicoff) {
document.getElementById(musicon).play();
document.getElementById(musicoff).pause();
}
My HTML
<audio id="themeD" autoplay="autoplay" loop="true">
<source src="d.ogg" type="audio/ogg" />
<source src="d.mp3" type="audio/mpeg" />
</audio>
<audio id="themeE" loop="true">
<source src="e.ogg" type="audio/ogg" />
<source src="e.mp3" type="audio/mpeg" />
</audio>
<a class="button" onclick="javascript:playTrack('ThemeE','ThemeD');">Change audio</a>
Somewhat of a beginner with Javascript and definitely a noob with audio elements so any and all help or tips would be appreciated.
Watch your spaces. You play the audio with the id Theme E, but the id of your audio is themeE