Im my audio player I need to get the duration of my audio track. I need a function that gets src of the audio and returns its duration. Here is what I am trying to do but does not work:
function getDuration(src){
var audio = new Audio();
audio.src = "./audio/2.mp3";
var due;
return getVal(audio);
}
function getVal(audio){
$(audio).on("loadedmetadata", function(){
var val = audio.duration;
console.log(">>>" + val);
return val;
});
}
I tried to split into two functions but it does not work. It would be great if it was as on working function.
Any idea?
because you're relying on an event to fire, you can't return a value in getDuration or getVal
instead, you want to use a callback function, like this (callbacks)
The example assume you want to put the duration into a span written like this
<span id="duration"></span>
function getDuration(src, cb) {
var audio = new Audio();
$(audio).on("loadedmetadata", function(){
cb(audio.duration);
});
audio.src = src;
}
getDuration("./audio/2.mp3", function(length) {
console.log('I got length ' + length);
document.getElementById("duration").textContent = length;
});
Any code that needs to "know" the length should be inside the callback function (where console.log is)
using Promises
function getDuration(src) {
return new Promise(function(resolve) {
var audio = new Audio();
$(audio).on("loadedmetadata", function(){
resolve(audio.duration);
});
audio.src = src;
});
}
getDuration("./audio/2.mp3")
.then(function(length) {
console.log('I got length ' + length);
document.getElementById("duration").textContent = length;
});
using Events - note 'myAudioDurationEvent' can obviously be (almost) anything you want
function getDuration(src, obj) {
return new Promise(function(resolve) {
var audio = new Audio();
$(audio).on("loadedmetadata", function(){
var event = new CustomEvent("myAudioDurationEvent", {
detail: {
duration: audio.duration,
}
});
obj.dispatchEvent(event);
});
audio.src = src;
});
}
var span = document.getElementById('xyz'); // you'll need to provide better logic here
span.addEventListener('myAudioDurationEvent', function(e) {
span.textContent = e.detail.duration;
});
getDuration("./audio/2.mp3", span);
although, this can be done similarly with callback or promise by passing in a destination to a modified getDuration function in those solutions as well - my point about using event listeners was more appropriate if one span for example was updated with duration multiple times - this solution still only does each span only once, so can be achieved with the other methods just as easily
given the new information in the comments for this answer, I believe this to be the better solution
function getDuration(src, destination) {
var audio = new Audio();
$(audio).on("loadedmetadata", function(){
destination.textContent = audio.duration;
});
audio.src = src;
}
and then invoke getDuration as needed like this
var span = createOrGetSomeSpanElement();
getDuration("./audio/2.mp3", span);
createOrGetSomeSpanElement returns the destination element to use in the getDuration function - how this is done is up to you, seeing as you create a playlist in a loop, I'm guessing you have some element created to receive the audio length already created - it's hard to answer a half asked question sometimes
Related
This question already has answers here:
How do I convert an existing callback API to promises?
(24 answers)
How to turn this callback into a promise using async/await?
(2 answers)
Closed last year.
Let's say I have the following, very simple javascript code:
function addPicture(name){
var src = document.getElementById("mainConsole");
var img = new Image();
img.onload=function() {
img.id=name;
src.appendChild(img);
}
img.src = name;
}
function clearpicture(name){
var elem = document.getElementById(name);
elem.remove();
}
This seems to work fine as long as these functions aren't isolated in rapid succession. Making the user click on a link:
test1
removes the picture as one would expect. However, if I just use this code:
addPicture("1.jpg");
clearpicture(1.jpg");
I get: TypeError: elem is null. I can solve this problem with a promise!
let p = new Promise(function(resolve, reject) {
setTimeout(() => resolve(1), 1000); // (*)
console.log("now");
}).then(function(result) {
clearpicture("1.jpg");
});
Everything works normally (after the delay specified of course.) Then, I tried to make the promise wait on the addpicture subroutine instead of setTimeout:
let p = new Promise(function(resolve, reject) {
addPicture("1.jpg","1",100,0,0);
resolve(1);
}).then(function(result) {
clearpicture("1.jpg");
console.log("picture removed");
});
I get the same null error. In my actual application, I have time for the image to load but if I try to remove a series of pictures at once:
clearpicture("1.jpg");
clearpicture("2.jpg");
clearpicture("3.jpg");
Nothing gets removed - although note there would be some delay since both of my subroutines do some processing before actually adding or removing anything.
How can I make javscript code wait on an image to be fully loaded or actually removed before it does anything else?
function addPicture(name){
return new Promise((resolve, reject)=>{
var src = document.getElementById("mainConsole");
var img = new Image();
img.onload=function() {
img.id=name;
src.appendChild(img);
img.src = name;
return resolve(1)
}
img.onerror = function(){return reject()}
}
}
addPicture.then(()=>clearPicture(name))
function clearpicture(name){
var elem = document.getElementById(name);
elem.remove();
}
function addPicture(name){
var src = document.getElementById("mainConsole");
var img = new Image();
return new Promise(v => ( img.onload = _ => ( img.id = name
, src.appendChild(img)
, v(name)
)
, img.src = name
));
}
function clearPicture(name){
var elem = document.getElementById(name);
elem.remove();
}
function delay(value,ms){
return new Promise(v => setTimeout(v,ms,value));
}
addPicture("https://i.ytimg.com/vi/1Ne1hqOXKKI/maxresdefault.jpg").then(name => delay(name,1000))
.then(clearPicture);
img {
height : 100vh;
}
<div id="mainConsole"></div>
Display for 1 sec and then remove.
I seem to have a very strange problem. I am trying to play a video which is being streamed live using a web browser. For this, I am looking at the MediaSource object. I have got it in a way so that the video is taken from a server in chunks to be played. The problem is that the first chunk plays correctly then playback stops.
To make this even more strange, if I put the computer to sleep after starting streaming, then wake it up andthe video will play as expected.
Some Notes:
I am currently using chrome.
I have tried both of them ,with and without calling MediaSource's endOfStream.
var VF = 'video/webm; codecs="vp8,opus"';
var FC = 0;
alert(MediaSource.isTypeSupported(VF));
var url = window.URL || window.webkitURL;
var VSRC = new MediaSource();
var VURL = URL.createObjectURL(VSRC);
var bgi, idx = 1;
var str, rec, dat = [], datb, brl;
var sbx;
//connect the mediasource to the <video> elment first.
vid2.src = VURL;
VSRC.addEventListener("sourceopen", function () {
// alert(VSRC.readyState);
//Setup the source only once.
if (VSRC.sourceBuffers.length == 0) {
var sb = VSRC.addSourceBuffer(VF);
sb.mode = 'sequence';
sb.addEventListener("updateend", function () {
VSRC.endOfStream();
});
sbx = sb;
}
});
//This function will be called each time we get more chunks from the stream.
dataavailable = function (e) {
//video is appended to the sourcebuffer, but does not play in video element
//Unless the computer is put to sleep then awaken!?
sbx.appendBuffer(e.result);
FC += 1;
//These checks behave as expected.
len.innerHTML = "" + sbx.buffered.length + "|" + VSRC.duration;
CTS.innerHTML = FC;
};
You are making two big mistakes:
You can only call sbx.appendBuffer when sbx.updating property is false, otherwise appendBuffer will fail. So what you need to do in reality is have a queue of chunks, and add a chunk to the queue if sbx.updating is true:
if (sbx.updating || segmentsQueue.length > 0)
segmentsQueue.push(e.result);
else
sbx.appendBuffer(e.result);
Your code explicitly says to stop playing after the very first chunk:
sb.addEventListener("updateend", function () {
VSRC.endOfStream();
});
Here is what you really need to do:
sb.addEventListener("updateend", function () {
if (!sbx.updating && segmentsQueue.length > 0) {
sbx.appendBuffer(segmentsQueue.shift());
}
});
I am in the process of replacing RecordRTC with the built in MediaRecorder for recording audio in Chrome. The recorded audio is then played in the program with audio api. I am having trouble getting the audio.duration property to work. It says
If the video (audio) is streamed and has no predefined length, "Inf" (Infinity) is returned.
With RecordRTC, I had to use ffmpeg_asm.js to convert the audio from wav to ogg. My guess is somewhere in the process RecordRTC sets the predefined audio length. Is there any way to set the predefined length using MediaRecorder?
This is a chrome bug.
FF does expose the duration of the recorded media, and if you do set the currentTimeof the recorded media to more than its actual duration, then the property is available in chrome...
var recorder,
chunks = [],
ctx = new AudioContext(),
aud = document.getElementById('aud');
function exportAudio() {
var blob = new Blob(chunks);
aud.src = URL.createObjectURL(new Blob(chunks));
aud.onloadedmetadata = function() {
// it should already be available here
log.textContent = ' duration: ' + aud.duration;
// handle chrome's bug
if (aud.duration === Infinity) {
// set it to bigger than the actual duration
aud.currentTime = 1e101;
aud.ontimeupdate = function() {
this.ontimeupdate = () => {
return;
}
log.textContent += ' after workaround: ' + aud.duration;
aud.currentTime = 0;
}
}
}
}
function getData() {
var request = new XMLHttpRequest();
request.open('GET', 'https://upload.wikimedia.org/wikipedia/commons/4/4b/011229beowulf_grendel.ogg', true);
request.responseType = 'arraybuffer';
request.onload = decodeAudio;
request.send();
}
function decodeAudio(evt) {
var audioData = this.response;
ctx.decodeAudioData(audioData, startRecording);
}
function startRecording(buffer) {
var source = ctx.createBufferSource();
source.buffer = buffer;
var dest = ctx.createMediaStreamDestination();
source.connect(dest);
recorder = new MediaRecorder(dest.stream);
recorder.ondataavailable = saveChunks;
recorder.onstop = exportAudio;
source.start(0);
recorder.start();
log.innerHTML = 'recording...'
// record only 5 seconds
setTimeout(function() {
recorder.stop();
}, 5000);
}
function saveChunks(evt) {
if (evt.data.size > 0) {
chunks.push(evt.data);
}
}
// we need user-activation
document.getElementById('button').onclick = function(evt){
getData();
this.remove();
}
<button id="button">start</button>
<audio id="aud" controls></audio><span id="log"></span>
So the advice here would be to star the bug report so that chromium's team takes some time to fix it, even if this workaround can do the trick...
Thanks to #Kaiido for identifying bug and offering the working fix.
I prepared an npm package called get-blob-duration that you can install to get a nice Promise-wrapped function to do the dirty work.
Usage is as follows:
// Returns Promise<Number>
getBlobDuration(blob).then(function(duration) {
console.log(duration + ' seconds');
});
Or ECMAScript 6:
// yada yada async
const duration = await getBlobDuration(blob)
console.log(duration + ' seconds')
A bug in Chrome, detected in 2016, but still open today (March 2019), is the root cause behind this behavior. Under certain scenarios audioElement.duration will return Infinity.
Chrome Bug information here and here
The following code provides a workaround to avoid the bug.
Usage : Create your audioElement, and call this function a single time, providing a reference of your audioElement. When the returned promise resolves, the audioElement.duration property should contain the right value. ( It also fixes the same problem with videoElements )
/**
* calculateMediaDuration()
* Force media element duration calculation.
* Returns a promise, that resolves when duration is calculated
**/
function calculateMediaDuration(media){
return new Promise( (resolve,reject)=>{
media.onloadedmetadata = function(){
// set the mediaElement.currentTime to a high value beyond its real duration
media.currentTime = Number.MAX_SAFE_INTEGER;
// listen to time position change
media.ontimeupdate = function(){
media.ontimeupdate = function(){};
// setting player currentTime back to 0 can be buggy too, set it first to .1 sec
media.currentTime = 0.1;
media.currentTime = 0;
// media.duration should now have its correct value, return it...
resolve(media.duration);
}
}
});
}
// USAGE EXAMPLE :
calculateMediaDuration( yourAudioElement ).then( ()=>{
console.log( yourAudioElement.duration )
});
Thanks #colxi for the actual solution, I've added some validation steps (As the solution was working fine but had problems with long audio files).
It took me like 4 hours to get it to work with long audio files turns out validation was the fix
function fixInfinity(media) {
return new Promise((resolve, reject) => {
//Wait for media to load metadata
media.onloadedmetadata = () => {
//Changes the current time to update ontimeupdate
media.currentTime = Number.MAX_SAFE_INTEGER;
//Check if its infinite NaN or undefined
if (ifNull(media)) {
media.ontimeupdate = () => {
//If it is not null resolve the promise and send the duration
if (!ifNull(media)) {
//If it is not null resolve the promise and send the duration
resolve(media.duration);
}
//Check if its infinite NaN or undefined //The second ontime update is a fallback if the first one fails
media.ontimeupdate = () => {
if (!ifNull(media)) {
resolve(media.duration);
}
};
};
} else {
//If media duration was never infinity return it
resolve(media.duration);
}
};
});
}
//Check if null
function ifNull(media) {
if (media.duration === Infinity || media.duration === NaN || media.duration === undefined) {
return true;
} else {
return false;
}
}
//USAGE EXAMPLE
//Get audio player on html
const AudioPlayer = document.getElementById('audio');
const getInfinity = async () => {
//Await for promise
await fixInfinity(AudioPlayer).then(val => {
//Reset audio current time
AudioPlayer.currentTime = 0;
//Log duration
console.log(val)
})
}
I wrapped the webm-duration-fix package to solve the webm length problem, which can be used in nodejs and web browsers to support video files over 2GB with not too much memory usage.
Usage is as follows:
import fixWebmDuration from 'webm-duration-fix';
const mimeType = 'video/webm\;codecs=vp9';
const blobSlice: BlobPart[] = [];
mediaRecorder = new MediaRecorder(stream, {
mimeType
});
mediaRecorder.ondataavailable = (event: BlobEvent) => {
blobSlice.push(event.data);
}
mediaRecorder.onstop = async () => {
// fix blob, support fix webm file larger than 2GB
const fixBlob = await fixWebmDuration(new Blob([...blobSlice], { type: mimeType }));
// to write locally, it is recommended to use fs.createWriteStream to reduce memory usage
const fileWriteStream = fs.createWriteStream(inputPath);
const blobReadstream = fixBlob.stream();
const blobReader = blobReadstream.getReader();
while (true) {
let { done, value } = await blobReader.read();
if (done) {
console.log('write done.');
fileWriteStream.close();
break;
}
fileWriteStream.write(value);
value = null;
}
blobSlice = [];
};
//If you want to modify the video file completely, you can use this package "webmFixDuration", Other methods are applied at the display level only on the video tag With this method, the complete video file is modified
webmFixDuration github example
mediaRecorder.onstop = async () => {
const duration = Date.now() - startTime;
const buggyBlob = new Blob(mediaParts, { type: 'video/webm' });
const fixedBlob = await webmFixDuration(buggyBlob, duration);
displayResult(fixedBlob);
};
I'm creating video objects via jquery from an array of urls that point to mp4 files.
I want to have the first video autoplay then once its finished pick up on the "ended" function and play the next video in the sequence.
$(document).ready(function () {
var urls = ["https://s3-us-west-1.amazonaws.com/linkto.mp4", "https://s3-us-west-1.amazonaws.com/linktoother.mp4"]
var videos = [];
for (var i = 0; i < urls.length; i++) {
var path = urls[i];
var video = $('<video></video>');
var source = $('<source></source>');
source.attr('src', path);
source.appendTo(video);
if (i === 0) {
video.attr('autoplay', 'true');
}
video.attr('id', 'video_' + i);
video.attr('preload', 'true');
video.attr('width', '100%');
videos.push(video);
video.on('ended', function () {
console.log('Video has ended!' + i);
// playNext(video);
});
$('#movie').append(video);
}
I can see the movies generated and the first one plays fine. The problem is when 'ended' function the variable i == 2 because thats how many videos are in the array and the for loop increased i. I've been away from javascript for a while. I can think of workarounds like adding an index attribute to the video element or something but basically how do I get the correct index in the "ended" function.
The problem here is the wrong use of a closure variable in a loop.
In your case you can create a local closure by using $.each() to iterate over the array
$(document).ready(function () {
var urls = ["https://s3-us-west-1.amazonaws.com/linkto.mp4", "https://s3-us-west-1.amazonaws.com/linktoother.mp4"]
var videos = [];
$.each(urls, function (i, path) {
var video = $('<video></video>');
var source = $('<source></source>');
source.attr('src', path);
source.appendTo(video);
if (i === 0) {
video.attr('autoplay', 'true');
}
video.attr('id', 'video_' + i);
video.attr('preload', 'true');
video.attr('width', '100%');
videos.push(video);
video.on('ended', function () {
console.log(i)
});
$('#movie').append(video);
})
})
You really don't want to have the index, since all the video elements are siblings you can just find the next sibling of the currently ended video element
video.on('ended', function () {
console.log('Video has ended!' + $(this).index());
var $current = $(this),
$next = $this.next();
console.log($next.find('source').attr('src'))
//playNext($(this));
});
Creating closures in loops: A common mistake
JavaScript closure inside loops – simple practical example
I got myself into a tangle which probably involves multiple asynchronous callback situations.
I have a javascript function called populatePageArea()
Inside populatePageArea it traverses through this array-like variable called pages amongst other code.
function populatePagesArea() {
// there was some code before the for loop
for (var i=0, l=pages.length; i<l; i++) {
addToPagesArea(pages[i], "");
}
// some code after...
}
Inside addToPagesArea function, I used the FileAPI from HTML 5 to preview the drag'n dropped files amongst other code.
function addToPages(file, front) {
// there was some code before..
reader = new FileReader();
reader.onload = (function (theDiv) {
return function (evt) {
var backgroundimage = "url(" + evt.target.result + ")";
theDiv.css("background-image", backgroundimage);
var sizeSettings = getSizeSettingsFromPage(file, calculateRatio);
};
}(imageDiv));
// step#3 execute file reader
reader.readAsDataURL(file);
// there was some code after..
}
So every time I previewed the file, I also attempted to do some calculation on the dimensions of the file.
function getSizeSettingsFromPage(file, whenReady) {
reader = new FileReader();
reader.onload = function(evt) {
var image = new Image();
image.onload = function(evt) {
var width = this.width;
var height = this.height;
var filename = file.name;
if (whenReady) {
whenReady(width, height, filename);
}
};
image.src = evt.target.result;
};
reader.readAsDataURL(file);
}
function calculateRatio(width, height, filename) {
var ratio = width/height;
var object = new Object();
object['height'] = width;
object['width'] = height;
object['ratio'] = ratio;
object['size'] = 'Original';
for (var size in SIZES) {
var min = SIZES[size].ratio - 0.01;
var max = SIZES[size].ratio + 0.01;
if (ratio <= max && ratio >= min) {
object['size'] = size;
}
}
pageSizes.add(filename, object);
}
pageSizes as seen in calculateRatio is a global variable which is an array-like type of variable.
It is definitely empty BEFORE populatePagesArea gets called.
Here is the situation:
my code is:
populatePagesArea();
getMajorityPageSize(); // this acts on the supposedly non-empty pageSizes global variable
But because I think the calculateRatio has not been called on ALL the previewed images, the pageSizes is always empty when getMajorityPageSize is called.
how can i make sure that after populatePagesArea is called, getMajorityPageSize gets triggered ONLY after all the pages have undergone calculateRatio function?
I believe this is asynchronous callback. But I am not sure how to do it for an array of objects that will need to undergo an async callback function like calculateRatio.
The simple solution (I have marked my changes with // ***:
// ***
var totalPages;
function populatePagesArea() {
// there was some code before the for loop
// ***
totalPages = pages.length;
for (var i=0, l=pages.length; i<l; i++) {
addToPagesArea(pages[i], "");
}
// some code after...
}
function addToPages(file, front) {
// there was some code before..
reader = new FileReader();
reader.onload = (function (theDiv) {
return function (evt) {
var backgroundimage = "url(" + evt.target.result + ")";
theDiv.css("background-image", backgroundimage);
var sizeSettings = getSizeSettingsFromPage(file, calculateRatio);
// *** Check to see if we're done after every load
checkPagesReady();
};
}(imageDiv));
// step#3 execute file reader
reader.readAsDataURL(file);
// there was some code after..
}
// *** Call getMajorityPageSize() here, only after all pages have loaded.
function checkPagesReady() {
if (pageSizes.length >= totalPages)
getMajorityPageSize();
}
The better solution if you're going to be dealing with more asynchronous things later on would be to refactor your code using promises. Promises is an API designed for dealing with asynchronous programming in a systematic and organized way. It'll make your life a lot easier if you're going to be doing more async work. There's a lot of free libraries that support promises, one of the major players is Q.js.