YunaiV
3 years ago
parent
10c22498c0
commit
79692cb990
@ -0,0 +1,97 @@ |
||||
<!-- |
||||
- Copyright (C) 2018-2019 |
||||
- All rights reserved, Designed By www.joolun.com |
||||
芋道源码： |
||||
① bug 修复： |
||||
1）joolun 的做法：使用 mediaId 从微信公众号，下载对应的 mp4 素材，从而播放内容； |
||||
存在的问题：mediaId 有效期是 3 天，超过时间后无法播放 |
||||
2）重构后的做法：后端接收到微信公众号的视频消息后，将视频消息的 media_id 的文件内容保存到文件服务器中，这样前端可以直接使用 URL 播放。 |
||||
② 代码优化：将 props 中的 objData 调成为 data 中对应的属性，并补充相关注释 |
||||
--> |
||||
<template> |
||||
<div class="wx-voice-div" @click="playVoice"> |
||||
<i :class="playing !== true ? 'el-icon-video-play': 'el-icon-video-pause'"> |
||||
<span class="amr-duration" v-if="duration">{{ duration }}</span> |
||||
</i> |
||||
<div v-if="content"> |
||||
<el-tag type="success" size="mini">语音识别</el-tag> |
||||
{{ content }} |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
// 因为微信语音是 amr 格式，所以需要用到 amr 解码器：https://www.npmjs.com/package/benz-amr-recorder |
||||
const BenzAMRRecorder = require('benz-amr-recorder') |
||||
|
||||
export default { |
||||
name: "wxVoicePlayer", |
||||
props: { |
||||
url: { // 语音地址，例如说：https://www.iocoder.cn/xxx.amr |
||||
type: String, |
||||
required: true |
||||
}, |
||||
content: { // 语音文本 |
||||
type: String, |
||||
required: false |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
amr: undefined, // BenzAMRRecorder 对象 |
||||
playing: false, // 是否在播放中 |
||||
duration: undefined, // 播放时长 |
||||
} |
||||
}, |
||||
methods:{ |
||||
playVoice() { |
||||
debugger |
||||
// 情况一：未初始化，则创建 BenzAMRRecorder |
||||
if (this.amr === undefined){ |
||||
this.amrInit(); |
||||
return; |
||||
} |
||||
|
||||
if (this.amr.isPlaying()) { |
||||
this.amrStop(); |
||||
} else { |
||||
this.amrPlay(); |
||||
} |
||||
}, |
||||
amrInit() { |
||||
const amr = new BenzAMRRecorder(); |
||||
this.amr = amr; |
||||
// 设置播放 |
||||
const that = this |
||||
amr.initWithUrl(this.url).then(function() { |
||||
that.amrPlay() |
||||
that.duration = amr.getDuration(); |
||||
}) |
||||
// 监听暂停 |
||||
amr.onEnded(function() { |
||||
that.playing = false; |
||||
}) |
||||
}, |
||||
amrPlay() { |
||||
this.playing = true; |
||||
this.amr.play() |
||||
}, |
||||
amrStop() { |
||||
this.playing = false; |
||||
this.amr.stop() |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.wx-voice-div { |
||||
padding: 5px; |
||||
background-color: #eaeaea; |
||||
border-radius: 10px; |
||||
} |
||||
.amr-duration { |
||||
font-size: 11px; |
||||
margin-left: 5px; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue