We Keep Coding

JavaScript: Get actual playback time of audio context?

I'm using Pizzicato for audio playing. If I call sound.start(0, 10) starting it at 10 seconds sound.context.currentTime doesn't reflect this, and in return makes my math wrong further down the line.
Is there a way to get the actual position its playing at? After manipulating it by pausing, and then replaying with offset? I'm doing it from a click event on a range slider.

HTMLMediaElement.currentTime
The HTMLMediaElement interface's currentTime property specifies the
current playback time in seconds.
const video = document.createElement('video');
console.log(video.currentTime);
var url = "https://dl.espressif.com/dl/audio/ff-16b-2c-44100hz.mp3";
document.querySelector("source").src = url;
document.querySelector("audio").addEventListener('timeupdate', (event) => {
console.log(event.target.currentTime);
});
<audio controls>
<source src="" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

HTML5 Audio autoplay for the first 3 visit/load to website only

I want this functionality in my website.
The audio should be played automatically for the first 3 visit for a visitor.
For example: If someone visits my website, the audio will be automatically played on each time he loads/refresh the website until his third visit.
<audio id="audio" controls autoplay>
<source src="audio/1.ogg" type="audio/ogg">
<source src="audio/1.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Can anybody help?

Make sure you are using the HTML5 audio element, and that it does not have the autoplay attribute set. This should work:
var playCount = localStorage.getItem('playCount') || 0;
if (playCount < 3) {
document.getElementById('audio').play();
localStorage.setItem('playCount', playCount + 1);
}

u may use html5 session storage , to store the number of visit , then u may disable autoplay
if (sessionStorage.visitcount==3) {
var aud = document.getElementById("audio");
aud.autoplay = false;
}
else {
sessionStorage.visitcount += 1;
}

How to change current time of a paused html5 video and start playing from that position?

I have a html 5 video on a page like this:
<video preload="none" id="movie" poster="http://my_poster_url.com/sourcefile.jpeg" controls>
<source id="mp4" type="video/mp4" src="http://my_mp4.com/sourcefile.mp4"></source>
<source id="webm" type="video/webm" src="http://my_webm.com/sourcefile.webm"></source>
</video>
Below that video I have a navigation where you can skip to different times in the video. It works perfectly when the video is playing, but when paused following error occurs:
InvalidStateError: An attempt was made to use an object that is not,
or is no longer, usable
Here the function:
$('#my_video_navigation a').click(function () {
var start_in_seconds=...//a variable that gets the time from a json based on the navigation index
$("#movie").get(0).currentTime = start_in_seconds;
$("#movie").get(0).play();
}
I added an if/else statement wether the video is paused or not:
if ($('#movie').get(0).paused) {
$("#movie").get(0).play();
}
and then tried to set the current time like above and even with a set timeout function so that it will wait till the video loaded and is playing but that didn't work. What am I doing wrong or what did I forget?

You should change the currentTime field of the media element, as you can see here in the API doc. There is also an example code here, at MDN
For reference, the sample code there:
var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start(); // Returns the starting time (in seconds)
mediaElement.seekable.end(); // Returns the ending time (in seconds)
mediaElement.currentTime = 122; // Seek to 122 seconds
mediaElement.played.end(); // Returns the number of seconds the browser has played
where the mediaElementID is the id of the audio or video tag.
Edit: It seems I've misread your question. I will take a further look.

How to gracefully stop html5 video playback

Is there a way to cleanly stop the html5 video playback ?
There are options like:
Set videoElement.src = "" . This throws an error on the video element, with code = 4.
OR
call videoElement.load(). This sets the readyState = 0 but there is not much documentation around it.

UX Perspective
Looking on Google for the difference between pause and stop gave me various results which I can summrize as:
Pause: Playback is stopped. Hitting play again continues from last position.
Stop: Playback is stopped. Hitting play again continues from beginning
At least from the UX point of view that covers all grounds
Stopping of loading of media
If your real goal is to stop the buffering process from happening as well, then your current approach seems to be entirely correct, running the following code is not triggering any errors for me in any browser I tried.
var video = document.querySelector("video");
video.play();
setTimeout(function() {
video.pause(0);
video.setAttribute("src", "");
}, 5000);
<video id="video" controls="" preload="none" mediagroup="myVideoGroup" poster="http://media.w3.org/2010/05/sintel/poster.png" style="height:180px">
<source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
<source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
<source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
</video>

How can I let the video start playing at particular position when after the page is loaded?

When after the page is loaded, I want to let the video start playing at 50 sec.
How can I code for that?
My current code is just like this.
<video id="video" controls="controls" autoplay="autoplay" name="media"><source src="video.mp4" type="video/mp4"></video>
<button name="test" onclick="alert(Math.floor(document.getElementById('video').currentTime) + ' secs elapsed!');">How much time has already elapsed?</button>

This post and MDN documentation suggests you can just set the video element currentTime = 50 when the page loads.
setting currentTime should seek to the value you set it to