我是我的音频播放器,我需要获取音轨的持续时间。我需要一个函数来获取音频的 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;
});
}
我尝试拆分为两个函数,但不起作用。如果能像工作功能一样就好了。
有什么想法吗?
因为您依赖事件来触发,所以无法在 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 所在的位置)
使用 Promise
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);
尽管如此,这也可以通过回调或 Promise 来完成,方法是将目的地传递给这些解决方案中修改后的 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
函数中使用的目标元素 - 如何完成此操作取决于您,当您在循环中创建播放列表时,我猜您创建了一些元素来接收音频长度已经创建了 - 有时很难回答一半的问题
最近遇到了类似的问题,但有一个文件输入,我必须检查用户上传的文件的持续时间。解决办法如下:
const onDrop = ([file]: File[]) => {
const audio = document.createElement('audio')
audio.setAttribute('src', URL.createObjectURL(file))
audio.addEventListener('loadedmetadata', () => {
const duration = audio.duration;
// do stuff with the duration
});
}