<template>
<view class="audio_page">
<view class="audio_txt">
<!-- 录制时间 -->
<view class="audio_time">
<view class="spot"></view>
<text class="time">{{voicePath==''?showRecordTime:soundTime}}</text>
</view>
<text class="btnDel" @click="discardFun">删除</text>
</view>
<view class="line_box_path" v-if="voicePath!=''">
<view class="line"></view>
<view class="line_view" :style="{'width':pathLineWdFun+'px'}">
<image src="@/static/post_message/blue_audio.png" class="line_audio"></image>
</view>
</view>
<view class="image img_start" v-if="time>0&&status==true" @click.stop="playFun()"></view>
<view class="image img_stop" v-if="time>0&&status==false" @click.stop="playFun()"></view>
</view>
</template>
<script>
var vue_this = null;
export default {
computed: {
// 动态计算已经录制的时间或者播放的录音的剩余时间
showRecordTime() {
if (this.time != 0) {
this.soundTime = this.formatFun(this.time);
this.durationTime = this.time.toString();
}
return this.formatFun(this.time);
},
pathLineWdFun() {
return this.pathLineWd;
},
},
data() {
return {
// 计算时间
time: 4,
// 播放路径
voicePath: 'http://hjycloud.oss-accelerate.aliyuncs.com/test/audio/1610016519086.mp3?Expires=1925376511&OSSAccessKeyId=LTAI4GDw1k1R6hGARYfUjzNj&Signature=YeCtdyVPfsNLsC2%2Byd42C1tQfeQ%3D',
torch_point_id: '',
lineWd: 0,
status: true,
soundTime: '00:00',
durationTime: '0',
innerAudioContext: null,
currentTime: 0,
duration: 0,
pathLineWd: 0,
}
},
onLoad(e) {
vue_this = this;
},
onShow() {
this.innerAudioContext = uni.createInnerAudioContext();
this.onPlay();
this.onCanplay();
this.onTimeUpdate();
this.onEnded();
this.onPause();
},
onHide() {
console.log("onhide")
// this.is_save = false;
this.innerAudioContext.destroy();
this.innerAudioContext = null;
uni.hideLoading();
},
destroyed() {
console.log("destroyed")
// this.is_save = false;
this.innerAudioContext.destroy();
},
methods: {
discardFun() {
this.pathLineWd = 0;
this.stopFunNum = 0;
this.voicePath = '';
this.soundTime = '';
this.time = 4;
this.lineWd = 0;
this.innerAudioContext.destroy();
this.innerAudioContext = null;
this.innerAudioContext = uni.createInnerAudioContext();
this.onPlay();
this.onCanplay();
this.onTimeUpdate();
this.onEnded();
this.onPause();
this.status = true;
this.autoplay = false;
},
playFun() {
this.voicePath = 'http://hjycloud.oss-accelerate.aliyuncs.com/test/audio/1610016519086.mp3?Expires=1925376511&OSSAccessKeyId=LTAI4GDw1k1R6hGARYfUjzNj&Signature=YeCtdyVPfsNLsC2%2Byd42C1tQfeQ%3D';
console.log("播放录音：", this.voicePath)
//播放录音
if (!this.voicePath) {
alert('音频文件空空如也，小主请先录音', "center");
return
}
// currentTime：当前播放时间 ，duration：录音总时长，单位；ms
this.status = false;
console.log("this.innerAudioContext:", this.innerAudioContext);
this.$nextTick(() => {
if (this.innerAudioContext == null) {
this.innerAudioContext = uni.createInnerAudioContext();
}
this.innerAudioContext.src = this.voicePath;
this.innerAudioContext.play();
console.log("打印：", this.innerAudioContext)
})
},
onCanplay() {
this.innerAudioContext.onCanplay((callback) => {
console.log("缓冲回调");
this.duration = this.innerAudioContext.duration;
})
},
onPlay() {
this.innerAudioContext.onPlay((callback) => {
console.log("播放回调");
})
},
onTimeUpdate() {
this.innerAudioContext.onTimeUpdate((callback) => {
this.currentTime = this.innerAudioContext.currentTime;
this.soundTime = this.formatFun(this.duration - this.currentTime);
let allwidth = 247;
let curWidth = (allwidth * this.currentTime) / this.duration;
console.log('duration:', this.duration, 'currentTime:', this.currentTime, 'curWidth:', curWidth)
this.pathLineWd = curWidth;
})
},
onEnded() {
this.innerAudioContext.onEnded((callback) => {
let allwidth = 247;
let curWidth = (allwidth * (this.duration - this.currentTime)) / this.duration;
this.pathLineWd = parseInt(this.pathLineWd += curWidth);
this.status = true;
});
},
onPause() {
this.innerAudioContext.onPause((callback) => {
this.status = true;
});
},
formatFun(time) {
var hh = parseInt(time / 3600);
if (hh < 10) hh = "0" + hh;
var mm = parseInt((time - hh * 3600) / 60);
if (mm < 10) mm = "0" + mm;
var ss = parseInt((time - hh * 3600) % 60);
if (ss < 10) ss = "0" + ss;
return mm + ':' + ss
},
stopFun() {
this.innerAudioContext.pause();
}
}
}
</script>
<style lang="scss" scoped>
.audio_page {
width: 100%;
height: 100vh;
box-sizing: border-box;
color: #fff;
background: #242533;
position: relative;
.image{
width: 100rpx;
height: 100rpx;
}
.img_start{
background-color: red;
}
.img_stop{
background-color: pink;
}
.line_box_path {
position: absolute;
overflow: hidden;
right: 20rpx;
// width: calc(100% - 120rpx);
width: 480rpx;
height: 60rpx;
top: 50%;
transform: translateY(-50%);
.line {
position: absolute;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #fff;
// background: url(../../../static/post_message/white_audio.png) no-repeat center center;
// background-size: 100% 100%;
}
.line_view {
// width: 480rpx;
height: 100%;
position: absolute;
z-index: 2;
left: 0;
top: 0;
overflow: hidden;
.line_audio {
width: 480rpx;
height: 100%;
/* background: url(../../../static/post_message/blue_audio.png) no-repeat right center;
background-size: 100% 100%; */
}
}
}
}
</style>
1 个回复
1***@qq.com (作者)