|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div class="audioBoxContent">
|
|
|
+ <div class="audioRecord">
|
|
|
<div class="audioBox">
|
|
|
<div
|
|
|
class="boxItem"
|
|
|
@@ -68,6 +68,12 @@ var recorder = new Recorder({
|
|
|
|
|
|
export default {
|
|
|
name: 'audioRecord',
|
|
|
+ props: {
|
|
|
+ audioUrl: {
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
//波浪图-录音
|
|
|
@@ -85,6 +91,14 @@ export default {
|
|
|
ys: 0, // 播放时长 秒
|
|
|
};
|
|
|
},
|
|
|
+ watch: {
|
|
|
+ audioUrl: {
|
|
|
+ handler() {
|
|
|
+ debugger;
|
|
|
+ this.getMp3Data();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
created() {
|
|
|
// 绑定事件-打印的是当前录音数据
|
|
|
recorder.onprogress = function (params) {
|
|
|
@@ -245,8 +259,17 @@ export default {
|
|
|
* 文件格式转换 wav-map3
|
|
|
* */
|
|
|
getMp3Data() {
|
|
|
- const mp3Blob = this.convertToMp3(recorder.getWAV());
|
|
|
- recorder.download(mp3Blob, 'recorder', 'mp3');
|
|
|
+ debugger;
|
|
|
+ let url = this.audioUrl;
|
|
|
+ var xhr = new XMLHttpRequest();
|
|
|
+ xhr.open('GET', url, true);
|
|
|
+ xhr.responseType = 'arraybuffer';
|
|
|
+ xhr.onload = function () {
|
|
|
+ var samples = new Int16Array(xhr.response);
|
|
|
+ const mp3Blob = this.convertToMp3(samples);
|
|
|
+ recorder.download(mp3Blob, 'recorder', 'mp3');
|
|
|
+ };
|
|
|
+ xhr.send();
|
|
|
},
|
|
|
convertToMp3(wavDataView) {
|
|
|
// 获取wav头信息
|
|
|
@@ -354,7 +377,7 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
-.audioBoxContent {
|
|
|
+.audioRecord {
|
|
|
background: #fff;
|
|
|
position: fixed;
|
|
|
bottom: 120px;
|