<template>
<div id="app">
<input type="file"
@change="handleChange" />
<audio controls="true" @loadeddata="handleLoad"
:src="url">
</audio>
</div>
</template>
<script>
import { secondsToTime, byteToText, getObjectURL } from "./util.js";
export default {
name: "app",
data() {
return {
url: "",
};
},
methods: {
handleLoad(event) {
let duration = event.target.duration;
console.log(duration, secondsToTime(duration));
},
handleChange(event) {
let file = event.target.files[0];
console.log(file.name);
console.log(file.size, byteToText(file.size));
let url = getObjectURL(file);
console.log(url);
this.url = url;
},
},
};
</script>用到的工具函数
// util.js
/**
* 秒 转文本显示 x时y分z秒
* @param {} secs
*/
export function secondsToTime(secs) {
let hoursDiv = secs / 3600;
// 向下取整
let hours = Math.floor(hoursDiv);
let minutesDiv = (secs % 3600) / 60;
let minutes = Math.floor(minutesDiv);
// 向上取整
let seconds = Math.ceil((secs % 3600) % 60);
if (seconds > 59) {
seconds = 0;
minutes = Math.ceil(minutesDiv);
}
if (minutes > 59) {
minutes = 0;
hours = Math.ceil(hoursDiv);
}
let timeStr = "";
if (hours > 0) {
timeStr += `时`;
}
if (minutes > 0) {
timeStr += `分`;
}
if (seconds > 0) {
timeStr += `秒`;
}
return timeStr;
}
/**
* 字节大小转显示文本
* @param {} size
*/
export function byteToText(size) {
let mb = Math.floor(size / (1024 * 1024));
let kb = Math.floor(size / 1024);
if (mb > 0) {
return (size / (1024 * 1024)).toFixed(2) + "MB";
} else if (kb > 0) {
return (size / 1024).toFixed(2) + "KB";
} else {
return size.toFixed(2) + "B";
}
}
/**
* 创建临时url
* @param {*} file
*/
export function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) {
// basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) {
// mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) {
// webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
参考
怎样获得html5的audio组件加载的MP3文件的总时长
