正文

掌握JS获取音频时长：轻松实现音频时间获取技巧

/0 浏览量
1106

在网页开发中，有时候我们需要获取音频文件的时长，以便进行一些交互设计，比如进度条显示、自动播放控制等。JavaScript 提供了多种方法来获取音频时长，以下是一些简单而实用的技巧。

1. 使用 HTML5 的 <audio> 元素

HTML5 的 <audio> 元素自带了一个属性 duration，可以直接获取音频的时长。这个属性返回的是音频时长，单位是秒。

// 假设有一个音频元素
var audio = document.getElementById('audio');

// 获取音频时长
var duration = audio.duration;

console.log('音频时长：' + duration + '秒');

2. 使用 JavaScript 的 getDuration 方法

对于不支持 duration 属性的旧版浏览器，我们可以使用 getDuration 方法来获取音频时长。这个方法需要音频文件已经加载完成。

// 创建一个音频对象
var audio = new Audio('audio.mp3');

// 监听音频文件加载完成事件
audio.addEventListener('canplaythrough', function() {
    // 获取音频时长
    var duration = audio.duration;

    console.log('音频时长：' + duration + '秒');
});

3. 使用 fetch API 和 Response 对象

我们可以使用 fetch API 来获取音频文件，并通过 Response 对象的 body 属性来读取音频文件的内容。然后，我们可以使用 Audio 对象来获取音频时长。

// 使用 fetch API 获取音频文件
fetch('audio.mp3')
    .then(function(response) {
        // 获取音频文件的流
        return response.body.getReader();
    })
    .then(function(reader) {
        // 创建一个空的 Blob 对象
        var chunks = [];

        // 读取音频文件
        return reader.read().then(function(result) {
            if (result.done) {
                // 创建一个 Blob 对象
                var blob = new Blob(chunks);

                // 创建一个 Audio 对象
                var audio = new Audio();

                // 设置音频文件的 Blob 对象
                audio.src = URL.createObjectURL(blob);

                // 监听音频文件加载完成事件
                audio.addEventListener('canplaythrough', function() {
                    // 获取音频时长
                    var duration = audio.duration;

                    console.log('音频时长：' + duration + '秒');
                });
            } else {
                // 读取下一个数据块
                chunks.push(result.value);
                return reader.read();
            }
        });
    });

4. 总结

以上是几种获取音频时长的技巧，你可以根据自己的需求选择合适的方法。需要注意的是，获取音频时长可能需要一些时间，特别是对于较大的音频文件。在实际应用中，你可能需要根据音频文件的大小和加载速度来优化这些方法。

-- 展开阅读全文 --