javascript - 如何在 Vue 中检索 mp3 或 wav 音频文件的持续时间
问题描述
当我上传音频文件以查看上传的 mp3 或 wav 的持续时间时,我试图实现这一目标,但我不知道如何在 vue 中做到这一点,有什么建议吗?我找到了这个脚本,但我不知道如何使用 vue 来管理它。任何帮助表示赞赏,谢谢。
Javascript:
var objectUrl;
$("#audio").on("canplaythrough", function(e){
var seconds = e.currentTarget.duration;
var duration = moment.duration(seconds, "seconds");
var time = "";
var hours = duration.hours();
if (hours > 0) { time = hours + ":" ; }
time = time + duration.minutes() + ":" + duration.seconds();
$("#duration").text(time);
URL.revokeObjectURL(objectUrl);
});
$("#file").change(function(e){
var file = e.currentTarget.files[0];
$("#filename").text(file.name);
$("#filetype").text(file.type);
$("#filesize").text(file.size);
objectUrl = URL.createObjectURL(file);
$("#audio").prop("src", objectUrl);
});
http://jsfiddle.net/derickbailey/s4P2v/
到目前为止我已经尝试过,但在控制台中我得到:0:00:
<input type="file" id="file" ref="file" v-on:change="handleFileUpload()"/>
<button @click="submitAudioFile"> SUBMIT</button>
handleFileUpload () {
this.file = this.$refs.file.files[0]
},
submitAudioFile () {
let objectUrl = ''
const myAudio = this.$refs.file.files[0]
objectUrl = URL.createObjectURL(myAudio)
const seconds = myAudio.duration
const duration = moment.duration(seconds, 'seconds')
let time = ''
const hours = duration.hours()
if (hours > 0) { time = `${hours }:` }
time = `${time + duration.minutes() }:${ duration.seconds()}`
console.log(time)
URL.revokeObjectURL(objectUrl)
}
解决方案
您必须使用 onloadmetadata 事件侦听器来访问音频的持续时间。
myAudio.onloadedmetadata = ()=> {
console.log(myAudio.duration)
}
推荐阅读
- spring - Spring 的 DeferredResult 不适用于 Spring-ws (SOAP)
- go - 使用 WithBlock() 选项创建 gRPC 客户端连接到异步启动的 gRPC 服务器会无限期地阻塞?
- mongodb - 默认情况下,MongoDB 是否对多个字段进行复合索引索引 _id 列?
- regex - 正则表达式匹配任何子字符串
- python - 如何获取内存中的对象?蟒蛇指针
- php - MSSQL 查询在 X 行后中断
- javascript - 使用 Angular 指令使用所需数量的卡片填充 Bootstrap 卡片组
- excel - COUNTIF 函数不计算具有特定文本值的单元格
- javascript - Datatables.net rowreorder issue with internet explorer
- python - (discord.py)我的机器人的 whois 命令也显示了用户的角色,将“@everyone”显示为“@@everyone”我该如何解决这个问题