如何通過函數獲取 audio.duration 值

Question

我是我的音頻播放器，我需要獲取音軌的持續時間。 我需要一個函數來獲取音頻的 src 並返回其持續時間。 這是我正在嘗試做但不起作用的事情：

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;
    });
}

我試圖分成兩個功能，但它不起作用。 如果它與工作功能一樣，那就太好了。

任何的想法？

Answer 1

因為您依賴於要觸發的事件，所以您無法在getDuration或getVal中返回值

相反，你想使用一個回調函數，像這樣（回調）

該示例假設您希望將持續時間放入這樣寫的跨度中

<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;
});

任何需要“知道”長度的代碼都應該在回調函數內（console.log所在的位置）

---

使用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;
});

---

使用事件 - 注意'myAudioDurationEvent'顯然可以（幾乎）任何你想要的東西

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);

雖然，通過將目的地傳遞到這些解決方案中的修改后的getDuration函數，可以類似地使用回調或承諾來完成這一點 - 如果例如一個跨度更新持續多次，我對使用事件偵聽器的觀點更合適 - 這個解決方案仍然只是每個只跨越一次，所以可以通過其他方法輕松實現

---

鑒於此答案的評論中的新信息，我認為這是更好的解決方案

function getDuration(src, destination) {
    var audio = new Audio();
    $(audio).on("loadedmetadata", function(){
        destination.textContent = audio.duration;
    });
    audio.src = src;
}

然后根據需要調用getDuration

var span = createOrGetSomeSpanElement();
getDuration("./audio/2.mp3", span);

createOrGetSomeSpanElement返回要在getDuration函數中使用的目標元素 - 如何完成此操作由您決定，當您在循環中創建播放列表時，我猜您已創建一些元素來接收已創建的音頻長度 - 這很難有時回答半問的問題

Answer 2

    var audio = document.createElement('audio');
    element.bind('change', function () {
    var file = element[0].files[0];
    var reader = new FileReader();
    if (file) {
        var reader = new FileReader();
        reader.onload = function (e) {
            audio.src = e.target.result;
            audio.addEventListener('loadedmetadata', function () {
            $('#durection-leble').text('(File Duration : ' + 
           Math.round(audio.duration) + ')');
                    // scope.setDuration(audio.duration);
             }, false);
        };
     reader.readAsDataURL(file);
   }});