听书-音频播放器

pages/talkBook/talkBookDetail.vue

@@ -6,7 +6,22 @@
 			<view class="voices" v-if="talkBookDetail.voices != '' && audioShow">
 				<audio style="text-align: left;  overflow: hidden;" :src="talkBookDetail.voices" @play="audioPlay"
 					poster="../../static/icon/home_icon_0.png" :name="talkBookDetail.title"
-					:author="bookInfo.author.authorName" :action="audioAction" controls></audio>
+					:author="bookInfo.author.authorName" :action="audioAction" controls @timeupdate="updateTime"></audio>
+				<!-- 下面自己写了个播放器 -->
+				<view class="audiobox">
+					<view class="audioinfo">
+						<image class="audioimg" :src="bookInfo.images" mode="aspectFit"></image>
+						<image class="audioimgstart" v-if="!this.paused" mode="aspectFit" src="../../static/audiostart.png" @click="start"></image>
+						<image class="audioimgstart" v-else mode="aspectFit" src="../../static/audiostop.png" @click="start"></image>
+						<view>
+							<view class="audiotitle">{{talkBookDetail.title}}</view>
+							<view class="audioauthor">{{bookInfo.author.authorName}}</view>
+							<view class="audioauthor">{{currentTime+'/'+duration}}秒</view>
+							<slider class="audioslider" block-size="12" v-model="currentTime" :max="duration" @change="changeTime"></slider>
+							<!-- <view @click="start">点击播放/暂停</view> -->
+						</view>
+					</view>
+				</view>
 			</view>
 			<view class="content" v-if="talkBookDetail.content != ''" v-html="talkBookDetail.content"></view>
 			<view class="content" v-else></view>
@@ -68,6 +83,10 @@
 				}, // 书籍信息
 				talkBookDetail: {},
 				windowWidth: 0,
+				audio: null,
+				duration: 10,
+				currentTime: 0,
+				paused: false
 			}
 		},
 		onLoad(e) {
@@ -75,16 +94,48 @@
 			console.log(e, 'onLoad')
 			this.bookId = e.bookId
 			this.teachId = e.teachId
+
+			// 初始化播放器实例
+			this.audio = uni.createInnerAudioContext();
 		},
 		onShow() {
 			this.getBookInfo()
 			this.getTalkBookDetail()
 		},
+		onHide() {
+			this.audio.pause() // 暂停播放
+		},
+		onUnload() {
+			this.audio.destroy() // 销毁播放器
+		},
 		computed: {
 			...mapState(['userInfo'])
 		},
 		methods: {
 			...mapMutations(['setUserInfo']),
+			start(){
+				this.initAudio() // 开始播放
+			},
+			initAudio(){
+				this.audio.onTimeUpdate(()=>{
+					this.duration = this.audio.duration.toFixed()
+					this.currentTime = this.audio.currentTime.toFixed()
+				})
+				this.paused = this.audio.paused
+				// console.log('paused',this.paused)
+				if(this.paused){
+					this.audio.play()
+				}else{
+					this.audio.pause()
+				}
+			},
+			updateTime(e){
+				this.currentTime = e.detail.currentTime.toFixed()
+				this.duration = e.detail.duration.toFixed()
+			},
+			changeTime(e){
+				this.audio.seek(e.detail.value) // 设置播放位置
+			},
 			audioPlay(){
 				console.log('播放讲书',this.$music)				
 				this.$music.setCloseBgm()	 // 关闭听书音频
@@ -140,6 +191,11 @@
 							console.log(res, 'res')
 							this.talkBookDetail = res.bookTeach
 
+							this.audio.src = this.talkBookDetail.voices // 设置播放资源路径
+							this.audio.onCanplay((e)=>{
+								this.duration = this.audio.duration.toFixed() // 初始化进度条和音频秒数
+							})
+
 							// this.isBuy = res.book.isBuy
 							// this.freeChapterCount = res.book.freeChapterCount
 						} else {
@@ -239,6 +295,43 @@
 			border-radius: 5px;
 		}
 	}
+	// 自定义播放器样式
+	.audiobox{
+		border:  2rpx solid #d6d5d5;
+		border-radius: 8px;
+		.audioinfo{
+			display: flex;
+			.audioimg{
+				padding: 10rpx;
+				width: 180rpx;
+				height: 220rpx;
+				border-radius: 5px;
+			}
+			.audioimgstart{
+				position: absolute;
+				padding: 20rpx;
+				width: 180rpx;
+				height: 220rpx;
+				border-radius: 5px;
+			}
+			.audiotitle{
+				padding: 10rpx;
+				font-size: 28rpx;
+				text-align: left;
+			}
+			.audioauthor{
+				padding: 4rpx;
+				font-size: 24rpx;
+				text-align: left;
+				color: #999;
+			}
+			.audioslider{
+				width: 400rpx;
+			}
+		}
+		
+		
+	}
 
 	// .opbtn{font-size: 14rpx;}
 </style>