diff --git a/pages/talkBook/talkBookDetail.vue b/pages/talkBook/talkBookDetail.vue
index bf26e1b..96ce928 100644
--- a/pages/talkBook/talkBookDetail.vue
+++ b/pages/talkBook/talkBookDetail.vue
@@ -6,7 +6,22 @@
+ :author="bookInfo.author.authorName" :action="audioAction" controls @timeupdate="updateTime">
+
+
+
+
+
+
+
+ {{talkBookDetail.title}}
+ {{bookInfo.author.authorName}}
+ {{currentTime+'/'+duration}}秒
+
+
+
+
+
@@ -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;}
\ No newline at end of file
diff --git a/static/audiostart.png b/static/audiostart.png
new file mode 100644
index 0000000..a84e040
Binary files /dev/null and b/static/audiostart.png differ
diff --git a/static/audiostop.png b/static/audiostop.png
new file mode 100644
index 0000000..cb960ff
Binary files /dev/null and b/static/audiostop.png differ
diff --git a/static/播放 (1).png b/static/播放 (1).png
new file mode 100644
index 0000000..e516636
Binary files /dev/null and b/static/播放 (1).png differ
diff --git a/static/暂停 (1).png b/static/暂停 (1).png
new file mode 100644
index 0000000..c83878f
Binary files /dev/null and b/static/暂停 (1).png differ