1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
| <!--
| - Copyright (C) 2018-2019
| - All rights reserved, Designed By www.joolun.com
| -->
| <template>
| <div v-loading="mainLoading" class="wx-voice-div" @click="outTime ? '' : playVoice(objData)">
| <i v-if="!outTime" :class="objData.amrPlaying != true ? 'icon-yuyin': 'icon-playing1'">
| <span class="amr-duration" v-if="objData.amrDuration">{{objData.amrDuration}}"</span>
| </i>
| <i v-if="outTime" class="el-icon-time">
| <span class="amr-duration">该语音已过期</span>
| </i>
| <div v-if="objData.repContent"><el-tag type="success" size="mini">语音识别</el-tag>{{objData.repContent}}</div>
| </div>
| </template>
|
| <script>
| import { getTempMaterialOther, getMaterialOther } from '@/api/mp/wxmaterial'
| const BenzAMRRecorder = require('benz-amr-recorder')
|
| export default {
| name: "wxVoicePlayer",
| props: {
| objData:{
| type: Object
| }
| },
| data() {
| return {
| outTime: false,
| mainLoading: false
| }
| },
| created() {
| this.outTime = this.objData.type === '1' && (parseInt(new Date().getTime() - new Date(this.objData.createTime).getTime()) >= 259200000)
| },
| mounted(){
| },
| computed: {
|
| },
| methods:{
| amrPlay(amr,val){
| this.$set(val, 'amrPlaying', true)
| amr.play()
| },
| amrStop(amr,val){
| this.$set(val, 'amrPlaying', false)
| amr.stop()
| },
| playVoice(val){
| let amr = val.amr
| if(amr == undefined){
| if(val.type == '2'){
| this.getMaterialOther(val.repMediaId , val.repName,val.appId)
| .then(repUrl => {
| this.$set(val,'repUrl',repUrl)
| this.handleAudio(val)
| })
| }else if(val.type == '1'){
| this.getTempMaterialOther(val.repMediaId , val.repName,val.appId)
| .then(repUrl => {
| this.$set(val,'repUrl',repUrl)
| this.handleAudio(val)
| })
| }
| }else{
| if(amr.isPlaying()){
| this.amrStop(amr, val)
| }else{
| this.amrPlay(amr, val)
| }
| }
| },
| async getTempMaterialOther(repMediaId,fileName,appId){
| let url
| this.mainLoading = true
| await getTempMaterialOther({
| mediaId: repMediaId,
| fileName: fileName,
| appId:appId
| }).then(response => {
| this.mainLoading = false
| url = window.URL.createObjectURL(new Blob([response.data]))
| }).catch(() => {
| this.mainLoading = false
| })
| return url
| },
| async getMaterialOther(repMediaId,fileName,appId){
| let url
| this.mainLoading = true
| await getMaterialOther({
| mediaId: repMediaId,
| fileName: fileName,
| appId: appId
| }).then(response => {
| this.mainLoading = false
| url = window.URL.createObjectURL(new Blob([response.data]))
| }).catch(() => {
| this.mainLoading = false
| })
| return url
| },
| handleAudio(val){
| this.$set(val,'amr',new BenzAMRRecorder())
| let amr = val.amr
| let that = this
| amr.initWithUrl(val.repUrl).then(function() {
| that.amrPlay(amr, val)
| that.$set(val,'amrDuration',amr.getDuration())
| })
| amr.onEnded(function() {
| that.$set(val, 'amrPlaying', false)//播放完了
| })
| }
| }
| };
| </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>
|
|
