You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
307 lines
8.8 KiB
307 lines
8.8 KiB
<template>
|
|
<view class="audio">
|
|
<view class="audio-wrapper">
|
|
<view class="audio-btn" @Tap.stop.prevent="handleBtn">
|
|
<view :class="'audio-sound-play ' + (!hasPlay && 'audio-sound-play-stop')">
|
|
<view class="audio-sound-play-item"></view>
|
|
<view class="audio-sound-play-item"></view>
|
|
<view class="audio-sound-play-item"></view>
|
|
<view class="audio-sound-play-item"></view>
|
|
</view>
|
|
</view>
|
|
<!-- <image src="/assets/images/topic/play.png" bind:tap="audioPlay" /> -->
|
|
<slider :value="stepValue" min="0" :max="totalMax" class="audio-slider" activeColor="#E60000" handleColor="#E60000" handleSize="12" />
|
|
<view class="audio-time">{{ totalTime }}</view>
|
|
</view>
|
|
<view class="audio-del">
|
|
<image v-if="showDel" src="/static/data/images/del_record.png" @Tap.stop.prevent="handleAudioDel" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
totalTime: '',
|
|
stepTime: 0,
|
|
totalMax: 0,
|
|
stepValue: 0,
|
|
hasPlay: false,
|
|
playUrl: '',
|
|
backgroundAudioManager: null
|
|
};
|
|
},
|
|
mixins: [],
|
|
props: {
|
|
url: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
duration: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
showDel: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
onAudioDel: () => {}
|
|
},
|
|
didMount() {
|
|
this.downLoadAudio();
|
|
},
|
|
didUpdate() {},
|
|
didUnmount() {
|
|
this.backgroundAudioManager = null;
|
|
},
|
|
methods: {
|
|
downLoadAudio() {
|
|
var _this = this;
|
|
let backgroundAudioManager = uni.getBackgroundAudioManager();
|
|
uni.downloadFile({
|
|
url: this.props.url,
|
|
success(res) {
|
|
console.log(res);
|
|
_this.setData({
|
|
playUrl: res.filePath,
|
|
backgroundAudioManager,
|
|
hasPlay: true
|
|
});
|
|
_this.initAudio();
|
|
},
|
|
fail() {
|
|
uni.showToast({
|
|
title: '音频加载失败',
|
|
icon: 'none',
|
|
duration: 1500
|
|
});
|
|
}
|
|
});
|
|
},
|
|
initAudio() {
|
|
let _this = this;
|
|
let backgroundAudioManager = _this.backgroundAudioManager;
|
|
backgroundAudioManager.src = _this.playUrl;
|
|
_this.initDuration();
|
|
console.log('ppppplllaaa', backgroundAudioManager);
|
|
backgroundAudioManager.onPlay = () => {
|
|
console.log('开始播放', backgroundAudioManager.duration);
|
|
};
|
|
backgroundAudioManager.onTimeUpdate = () => {
|
|
console.log('duration-onTimeUpdate', backgroundAudioManager.duration);
|
|
console.log('currentTime', backgroundAudioManager.currentTime);
|
|
if (backgroundAudioManager.duration) {
|
|
_this.setData({
|
|
totalMax: backgroundAudioManager.duration * 1000
|
|
});
|
|
}
|
|
_this.setData({
|
|
stepValue: backgroundAudioManager.currentTime * 1000
|
|
});
|
|
console.log('stepValue', _this.stepValue);
|
|
console.log('totalTime', _this.totalTime);
|
|
console.log('totalMax', _this.totalMax);
|
|
};
|
|
backgroundAudioManager.onEnded = () => {
|
|
console.log('end');
|
|
_this.setData({
|
|
hasPlay: false
|
|
});
|
|
};
|
|
backgroundAudioManager.onError = (res) => {
|
|
console.log('errMsg', res.errMsg);
|
|
uni.showToast({
|
|
title: '音频播放错误',
|
|
icon: 'none',
|
|
duration: 1500
|
|
});
|
|
};
|
|
},
|
|
initDuration() {
|
|
var _a = this;
|
|
var totalTime = _a.totalTime;
|
|
var duration = this.props.duration;
|
|
if (duration) {
|
|
totalTime = this.format(duration * 1000);
|
|
console.log(totalTime, duration);
|
|
this.setData({
|
|
totalTime: totalTime,
|
|
totalMax: duration
|
|
});
|
|
}
|
|
console.log('totalMax', this.totalMax);
|
|
},
|
|
handleBtn() {
|
|
this.audioPlay();
|
|
},
|
|
audioPause() {
|
|
this.backgroundAudioManager.pause();
|
|
this.setData({
|
|
hasPlay: false
|
|
});
|
|
},
|
|
audioPlay() {
|
|
this.backgroundAudioManager.play();
|
|
this.setData({
|
|
hasPlay: true
|
|
});
|
|
},
|
|
slideChange(e) {
|
|
this.audioPause();
|
|
var value = e.detail.value;
|
|
console.log('slidechange', value);
|
|
innerAudioContext.seek(value / 1000);
|
|
this.setData({
|
|
stepValue: value
|
|
});
|
|
this.audioPlay();
|
|
},
|
|
handleSlideMove(e) {
|
|
this.audioPause();
|
|
},
|
|
handleAudioDel() {
|
|
this.backgroundAudioManager.stop();
|
|
console.log('innerAudioContextdel', this.backgroundAudioManager);
|
|
this.props.onAudioDel();
|
|
},
|
|
format: function (num) {
|
|
var min = parseInt(num / 1000 / 60);
|
|
var second = parseInt(num / 1000) % 60;
|
|
min = min >= 10 ? min : '0' + min;
|
|
second = second >= 10 ? second : '0' + second;
|
|
return min + ':' + second;
|
|
}
|
|
},
|
|
created: function () {}
|
|
};
|
|
</script>
|
|
<style>
|
|
.audio,
|
|
.audio-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.audio {
|
|
margin-bottom: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 20rpx;
|
|
}
|
|
.audio-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 590rpx;
|
|
height: 90rpx;
|
|
box-sizing: border-box;
|
|
margin-right: 30rpx;
|
|
padding: 0 20rpx;
|
|
background: #fff;
|
|
box-shadow: 0rpx 3rpx 24rpx 0rpx rgba(211, 211, 211, 0.26);
|
|
border-radius: 20rpx;
|
|
-webkit-border-radius: 20rpx;
|
|
-moz-border-radius: 20rpx;
|
|
-ms-border-radius: 20rpx;
|
|
-o-border-radius: 20rpx;
|
|
}
|
|
.audio-wrapper image {
|
|
display: block;
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
}
|
|
.audio-wrapper .audio-btn {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border: 4rpx solid #333;
|
|
overflow: hidden;
|
|
border-radius: 50%;
|
|
-webkit-border-radius: 50%;
|
|
-moz-border-radius: 50%;
|
|
-ms-border-radius: 50%;
|
|
-o-border-radius: 50%;
|
|
}
|
|
.audio-wrapper .audio-slider {
|
|
width: 386rpx;
|
|
margin: 0 auto;
|
|
}
|
|
.audio-wrapper .audio-time {
|
|
width: 70rpx;
|
|
font-size: 26rpx;
|
|
font-family: Source Han Serif SC;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
.audio-del image {
|
|
display: block;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
@-webkit-keyframes list {
|
|
0% {
|
|
-webkit-transform: scaley(1);
|
|
transform: scaley(1);
|
|
}
|
|
50% {
|
|
-webkit-transform: scaley(0.4);
|
|
transform: scaley(0.4);
|
|
}
|
|
100% {
|
|
-webkit-transform: scaley(1);
|
|
transform: scaley(1);
|
|
}
|
|
}
|
|
@keyframes list {
|
|
0% {
|
|
-webkit-transform: scaley(1);
|
|
transform: scaley(1);
|
|
}
|
|
50% {
|
|
-webkit-transform: scaley(0.4);
|
|
transform: scaley(0.4);
|
|
}
|
|
100% {
|
|
-webkit-transform: scaley(1);
|
|
transform: scaley(1);
|
|
}
|
|
}
|
|
.audio-sound-play {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
}
|
|
.audio-sound-play .audio-sound-play-item {
|
|
width: 2rpx;
|
|
height: 20rpx;
|
|
border-radius: 6rpx;
|
|
margin-right: 2rpx;
|
|
background-color: #333;
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
animation: list 1s 0s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
|
|
-webkit-border-radius: 6rpx;
|
|
-moz-border-radius: 6rpx;
|
|
-ms-border-radius: 6rpx;
|
|
-o-border-radius: 6rpx;
|
|
-webkit-animation: list 1s 0s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
|
|
}
|
|
.audio-sound-play .audio-sound-play-item:nth-child(1) {
|
|
-webkit-animation-delay: 0.1s !important;
|
|
animation-delay: 0.1s !important;
|
|
}
|
|
.audio-sound-play .audio-sound-play-item:nth-child(2) {
|
|
-webkit-animation-delay: 0.2s !important;
|
|
animation-delay: 0.2s !important;
|
|
}
|
|
.audio-sound-play .audio-sound-play-item:nth-child(3) {
|
|
-webkit-animation-delay: 0.3s !important;
|
|
animation-delay: 0.3s !important;
|
|
}
|
|
.audio-sound-play .audio-sound-play-item:nth-child(4) {
|
|
-webkit-animation-delay: 0.4s !important;
|
|
animation-delay: 0.4s !important;
|
|
}
|
|
.audio-sound-play-stop .audio-sound-play-item {
|
|
animation-play-state: paused;
|
|
}
|
|
</style>
|
|
|