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