{"id":312,"date":"2024-01-06T15:37:17","date_gmt":"2024-01-06T10:07:17","guid":{"rendered":"http:\/\/codetheory.in\/?p=312---e4ab1016-0905-4df5-8ea9-740e8a49466d"},"modified":"2024-01-06T15:37:17","modified_gmt":"2024-01-06T10:07:17","slug":"get-the-duration-of-an-audio-or-video-file-in-javascript","status":"publish","type":"post","link":"https:\/\/codetheory.in\/get-the-duration-of-an-audio-or-video-file-in-javascript\/","title":{"rendered":"Get the Duration of an Audio or Video File in Javascript"},"content":{"rendered":"

\"\"<\/p>\n

It is quite easy to get the playback length (in seconds) of an audio or video file. The file may be in whatever format that the browser supports – mp3, mp4, ogg, wav, etc.
\n<\/p>\n

When Using the HTML5 Elements<\/h2>\n

When using the HTML5 <audio><\/code> or <video><\/code> elements, you can simply check the duration property in Javascript.<\/p>\n

\r\nvar audio_duration = document.querySelector('audio').duration; \/\/ 10.026666641235352\r\n\/\/ or\r\nvar video_duration = document.querySelector('video').duration;\r\n<\/pre>\n
Web Audio API<\/h2>\n
When working with the Web Audio API, you might load the Audio file in several ways. The most common way is using AJAX.<\/p>\n
\r\nvar ctx = new webkitAudioContext();\r\n\r\nfunction loadMusic(url) {\r\n  var req = new XMLHttpRequest();\r\n  req.open('GET', url, true);\r\n  req.responseType = 'arraybuffer';\r\n\r\n  req.onload = function() {\r\n\r\n    ctx.decodeAudioData(req.response, function(buffer) {\r\n      console.log(buffer);\r\n      console.log(buffer.duration); \/\/ 116\r\n    })\r\n  };\r\n\r\n  req.send();\r\n}\r\n<\/pre>\n
We loaded the audio file using XHR2<\/code> that supports the arraybuffer<\/code> response type. Some other ways might include using the file input field or the FileSystem<\/code> API to fetch the file from and then read that using FileReader.readAsArrayBuffer()<\/code>.<\/p>\n
So, when the Audio Data in the ArrayBuffer (in the XHR response) is decoded by ctx.decodeAudioData<\/code> (async and non-blocking), the callback we passed to it gets called. This callback receives, an AudioBuffer<\/code> object that contains the duration<\/code> property which holds the duration of the PCM Audio Data in seconds. This approach seems to work fine on a video file too!<\/p>\n
Note: In both the methods discussed above, the duration<\/code> value is a float<\/code> representing the time in seconds<\/code>.<\/p>\n","protected":false},"excerpt":{"rendered":"
It is quite easy to get the playback length (in seconds) of an audio or video file. The file may be in whatever format that the browser supports – mp3, mp4, ogg, wav, etc.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[40],"tags":[43,44,45],"_links":{"self":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts\/312"}],"collection":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/comments?post=312"}],"version-history":[{"count":13,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts\/312\/revisions"}],"predecessor-version":[{"id":184647,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts\/312\/revisions\/184647"}],"wp:attachment":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/media?parent=312"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/categories?post=312"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/tags?post=312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}