WeChatAppH5/pages/task/components/submitAudio.vue

<template>
	<view class="task-form-item form-item-media">
		<view class="form-lable">
			<text><text class="form-must" v-if="rule && rule.required">* </text>录音:</text>
			<view :class="['form-lable-content' , soundRecording.length > 0 ? 'lable-content-right' : '']"
				v-if="!soundRecording || soundRecording.length < num">
				<template v-if="!checkPage">
					<!-- #ifdef APP -->
					<nb-voice-record @startRecord="start" @endRecord="end" @cancelRecord="cancel">
						<view class="lable-content-btn" @click.stop="onRecording()">
							<text class="iconfont_yige">&#xe6a0;</text>
							<text>长按录音</text>
						</view>
					</nb-voice-record>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<!-- @click.stop="showRecorder ? recStop():recReq()" -->
					<view class="lable-content-btn" @longpress="longPressEvent" @touchend="longPressEnd"
						@touchcancel="longPressEnd">
						<text class="iconfont_yige">&#xe6a0;</text>
						<template v-if="!showRecorder">
							<text>{{showRecorder ? '停止录音':'开始录音'}}</text>
						</template>
						<template v-else>
							<canvas type="2d" class="recwave-WaveView" style="width:4em;height:100%"></canvas>
						</template>
					</view>
					<!-- #endif -->
				</template>
			</view>
			<text class="form-media-num">({{soundRecording.length}}/{{num}})</text>
		</view>
		<view class="form-img-video">
			<view class="audio-item" :key="index" v-for="(item,index) in soundRecording"
				@click.stop="onPlayAudio(item , index)">
				<view :class="['audio-item-val' , play_index === index ? 'play-audio' : '']"><text
						class="iconfont_yige">&#xe6a5;</text>
					<text class="audio-time">{{item.duration}}</text> <text class="iconfont_yige">&#xe6a6;</text>
				</view>
				<view class="del-img-video iconfont_yige" @click.stop="delAudio(index)" v-if="!checkPage">&#xe867;
				</view>
			</view>
		</view>
		<!-- <H5RecorderPopup ref="H5RecorderPopupRef" /> -->
	</view>
</template>
<script>
	import {
		SingleFileUpload
	} from "@/utils/tool.js"
	let innerAudioContext = uni.createInnerAudioContext();
	import H5Recorder from "@/pages/task/components/H5Recorder.js"
	// import H5RecorderPopup from "./H5RecorderPopup.vue"
	export default {
		name: 'submitAudio',
		mixins: [H5Recorder],
		// components: { H5RecorderPopup },
		model: {
			prop: ['soundRecording'],
			event: ['onChange']
		},
		props: {
			checkPage: {
				type: Boolean,
				default: false
			},
			num: {
				type: Number,
				default: 3
			},
			rule: {
				type: Object,
				default: null
			},
			soundRecording: {
				type: Array,
				default: () => [],
				require: true
			},
		},
		data() {
			return {
				play_index: -1,
				audio_s: 0,
				audioInterval: null,
			}
		},
		methods: {
			start() {
				// 开始录音
				try {
					clearInterval(this.audioInterval)
				} catch (e) {}
				this.audioInterval = null;
				this.audio_s = 0;
				this.audioInterval = setInterval(() => {
					this.audio_s += 1;
				}, 1000)
			},
			end(event) {
				try {
					clearInterval(this.audioInterval)
				} catch (e) {}

				this.audioInterval = null;
				if (this.audio_s > 1) {
					const file_ = event ? event.tempFilePath : ''
					SingleFileUpload(file_, true).then(res => {
						this.soundRecording.push({
							filePath: res.url,
							duration: this.audio_s
						})
					})
				} else {
					uni.showToast({
						title: '录音时间过短,请重新录音',
						icon: 'none'
					})
				}


				// 结束录音并处理得到的录音文件
				// event中，app端仅有tempFilePath字段，微信小程序还有duration和fileSize两个字段
			},
			cancel() {
				// 用户取消录音
			},
			delAudio(index) {
				if (this.play_index === index) {
					// 当前存在播放，先关闭播放
					try {
						innerAudioContext.pause();
						innerAudioContext.destroy()
						innerAudioContext = null
					} catch (e) {
						//TODO handle the exception
					}
				}
				this.soundRecording.splice(index, 1);
			},
			onPlayAudio(item, index) {
				console.log('item ==1111= ', innerAudioContext)
				if (innerAudioContext) {
					try {
						innerAudioContext.pause();
						innerAudioContext.destroy()
						innerAudioContext = null
					} catch (e) {
						//TODO handle the exception
					}
				}
				// 点击同一个播放的时候，阻止继续播放
				if (this.play_index === index) {
					this.play_index = -1;
					return
				}
				if (item) {
					try {

						innerAudioContext = uni.createInnerAudioContext();
						innerAudioContext.src = item.filePath;
						innerAudioContext.play();
						innerAudioContext.onPlay(() => {
							this.play_index = index;
							console.log('开始播放');
						});
						innerAudioContext.onError((res) => {
							this.play_index = -1;
							innerAudioContext.destroy()
							innerAudioContext = null
							// uni.showToast({
							// 	title: '播放失败',
							// 	icon: 'none'
							// })
						});
						innerAudioContext.onEnded((res) => {
							this.play_index = -1;
							innerAudioContext.destroy()
							innerAudioContext = null
							// uni.showToast({
							// 	title: '播放结束事件',
							// 	icon: 'none'
							// })
						});
						innerAudioContext.onPause((res) => {
							this.play_index = -1;
							innerAudioContext.destroy()
							innerAudioContext = null
							// uni.showToast({
							// 	title: '播放暂停事件',
							// 	icon: 'none'
							// })
						});

					} catch (e) {
						//TODO handle the exception
						console.log('play = Audio = ', e)
					}
				}
			},
			onRecording() {

			},
			onH5Recording() {
				recOpen({}, () => {

				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	@import '~./submint.scss';

	.form-img-video {
		flex-direction: column !important;
	}

	.audio-item {

		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;

		&:last-child {
			margin-bottom: 0rpx;
		}

		.audio-item-val {
			flex: 1;
			margin-right: 20rpx;
			height: 70rpx;
			background-color: #E6E6E6;
			border-radius: 14rpx;
			display: flex;
			align-items: center;
			padding: 0 20rpx;

			.audio-time {
				padding-left: 20rpx;
			}

			.iconfont_yige {
				font-size: 40rpx;
			}
		}
	}

	.play-audio {
		overflow: hidden;
		/* 超出部分隐藏起来 */
		animation: changecolor 1.5s linear infinite;
		/* 定义动画效果 */
	}


	@keyframes changecolor {
		0% {
			background-color: rgba(60, 183, 210, 0.4);
		}

		35% {
			background-color: rgba(60, 183, 210, 0.6);
		}

		75% {
			background-color: rgba(60, 183, 210, 0.8);
		}

		100% {
			background-color: rgba(60, 183, 210, 1);
		}
	}
</style>