如何通过函数获取audio.duration值 [英] how to get audio.duration value by a function

问题描述

我的音频播放器我需要获得音轨的持续时间。我需要一个函数来获取音频的src并返回其持续时间。这是我想要做的但是不起作用：

  function getDuration（src）{
 var audio =新音频（）; 
 audio.src =。/ audio / 2.mp3; 
 var到期; 
返回getVal（音频）; 
} 
函数getVal（音频）{
 $（音频）.on（loadedmetadata，function（）{
 var val = audio.duration; 
 console .log（>>>+ val）; 
返回val; 
}）; 
} 
  

我试图分成两个函数，但它不起作用。如果它像工作函数那样会很棒。

任何想法？

解决方案

因为你依赖于一个事件来触发，你不能在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，函数（长度）{
 console.log（'我有长度'+长度）; 
 document.getElementById （持续时间）。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（'我有长度'+长度）; 
 document.getElementById（duration）。textContent = length; 
}）; 
  

---

使用事件 - 注意 'myAudioDurationEvent'显然可以（几乎）你想要的任何东西

  function getDuration（src，obj） {
返回新的Promise（函数（解析）{
 var audio = new Audio（）; 
 $（audio）.on（loadedmetadata，function（）{
 var event = new CustomEvent（myAudioDurationEvent，{
 detail：{
 duration：audio.duration，
 
} 
}）; 
 obj.dispatchEvent （事件）; 
}）; 
 audio.src = src; 
}）; 
} 
 var span = document.getElementById（'xyz'）; //你需要在这里提供更好的逻辑
 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 函数 - 这是怎么做的取决于你，看到你在循环中创建一个播放列表，我猜你有一些元素被创建来接收音频长度已经创建 - 有时很难回答半问的问题

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

这篇关于如何通过函数获取audio.duration值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！