From 4aa6f82fa8b8d0e1a1b60b4f932bfe352f015d01 Mon Sep 17 00:00:00 2001 From: zhengyi Date: Fri, 3 Mar 2023 16:03:11 +0800 Subject: [PATCH] =?UTF-8?q?[Feature]=20=E5=AE=8C=E6=88=90=E9=9F=B3?= =?UTF-8?q?=E9=A2=91=E6=92=AD=E6=94=BE=E9=83=A8=E5=88=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../audio-controls/audio-controls.js | 27 +++++++ .../audio-controls/audio-controls.json | 7 ++ .../audio-controls/audio-controls.wxml | 38 ++++++++++ .../audio-controls/audio-controls.wxss | 35 +++++++++ components/poem-audio/poem-audio.js | 76 +++++++++++++++++++ components/poem-audio/poem-audio.json | 8 ++ components/poem-audio/poem-audio.wxml | 8 ++ components/poem-audio/poem-audio.wxss | 38 ++++++++++ fonts/style.wxss | 13 ++-- pages/poem-detail/poem-detail.json | 3 +- pages/poem-detail/poem-detail.wxml | 6 +- 11 files changed, 250 insertions(+), 9 deletions(-) create mode 100644 components/poem-audio/audio-controls/audio-controls.js create mode 100644 components/poem-audio/audio-controls/audio-controls.json create mode 100644 components/poem-audio/audio-controls/audio-controls.wxml create mode 100644 components/poem-audio/audio-controls/audio-controls.wxss create mode 100644 components/poem-audio/poem-audio.js create mode 100644 components/poem-audio/poem-audio.json create mode 100644 components/poem-audio/poem-audio.wxml create mode 100644 components/poem-audio/poem-audio.wxss diff --git a/components/poem-audio/audio-controls/audio-controls.js b/components/poem-audio/audio-controls/audio-controls.js new file mode 100644 index 0000000..cfdb06c --- /dev/null +++ b/components/poem-audio/audio-controls/audio-controls.js @@ -0,0 +1,27 @@ +// components/poem-audio/audio-controls/audio-controls.js +Component({ + /** + * 组件的属性列表 + */ + properties: { + currTime: Number, + fullTime: Number, + isPlaying: Boolean + }, + + /** + * 组件的初始数据 + */ + data: { + + }, + + /** + * 组件的方法列表 + */ + methods: { + toggle() { + this.triggerEvent('toggle') + } + } +}) diff --git a/components/poem-audio/audio-controls/audio-controls.json b/components/poem-audio/audio-controls/audio-controls.json new file mode 100644 index 0000000..6edc6dc --- /dev/null +++ b/components/poem-audio/audio-controls/audio-controls.json @@ -0,0 +1,7 @@ +{ + "component": true, + "usingComponents": { + "t-icon": "tdesign-miniprogram/icon/icon", + "t-progress": "tdesign-miniprogram/progress/progress" + } +} \ No newline at end of file diff --git a/components/poem-audio/audio-controls/audio-controls.wxml b/components/poem-audio/audio-controls/audio-controls.wxml new file mode 100644 index 0000000..44609ce --- /dev/null +++ b/components/poem-audio/audio-controls/audio-controls.wxml @@ -0,0 +1,38 @@ + + + + {{we.formatTime(currTime)}} + {{we.formatTime(fullTime)}} + + + + + + + + + + + + + + + + + + +// 格式化时间展示 +function formatTime(time) { + var sec = time % 60 + sec = sec.toFixed(0) + if (sec < 10) sec = '0' + sec + var min = time / 60 + min = min.toFixed(0) + if (min < 10) min = '0' + min + return min + ':' + sec +} + +module.exports = { + formatTime: formatTime +} + \ No newline at end of file diff --git a/components/poem-audio/audio-controls/audio-controls.wxss b/components/poem-audio/audio-controls/audio-controls.wxss new file mode 100644 index 0000000..1f289ad --- /dev/null +++ b/components/poem-audio/audio-controls/audio-controls.wxss @@ -0,0 +1,35 @@ + +.slider .time { + display: flex; + flex-direction: row; + justify-content: space-between; + color: #999999; + font-size: 22rpx; +} + +.controls { + display: flex; + align-items: center; + justify-content: center; +} + +.btn { + display: flex; + margin: 20rpx; + justify-content: center; + align-items: center; + background-color: #3c9cff; + color: #ffffff; +} + +.btn-large { + width: 120rpx; + height: 120rpx; + border-radius: 50%; +} + +.btn-mid { + width: 80rpx; + height: 80rpx; + border-radius: 50%; +} \ No newline at end of file diff --git a/components/poem-audio/poem-audio.js b/components/poem-audio/poem-audio.js new file mode 100644 index 0000000..6ce18b0 --- /dev/null +++ b/components/poem-audio/poem-audio.js @@ -0,0 +1,76 @@ +import network from "../../config/network"; + +// components/poem-audio/poem-audio.js +Component({ + /** + * 组件的属性列表 + */ + properties: { + audio: String, + lyric: String + }, + + /** + * 组件的初始数据 + */ + data: { + audioCtx: null, + isPlaying: false, + fullTime: 0, + currTime: 0, + playListenerTimer: -1 + }, + + /** + * 组件的方法列表 + */ + methods: { + play() { + let audioCtx = this.data.audioCtx + // 检测是否存在Audio + if (audioCtx === null) { + console.log("不存在音频上下文，创建..."); + audioCtx = wx.createInnerAudioContext() + audioCtx.src = network.backstageUrl + this.properties.audio + audioCtx.onEnded(() => this.setData({isPlaying: false, currTime: 0})) + this.setData({audioCtx}) + } + audioCtx.play() + // 开始监听播放进度 + if (this.data.playListenerTimer === -1) { + let timer = setInterval(() => { + if (this.data.isPlaying) { + this.setData({currTime: this.data.audioCtx.currentTime}) + } + if (this.data.fullTime === 0) { + this.setData({fullTime: this.data.audioCtx.duration}) + } + }, 500) + this.setData({playListenerTimer: timer}) + } + this.setData({isPlaying: true}) + }, + pause() { + let audioCtx = this.data.audioCtx + if (audioCtx !== null) { + audioCtx.pause() + this.setData({isPlaying: false}) + } + // 清空播放时间监听器 + if (this.data.playListenerTimer !== -1) { + clearInterval(this.data.playListenerTimer) + this.setData({playListenerTimer: -1}) + } + }, + toggle() { + if (this.data.isPlaying) { + this.pause() + } else { + this.play() + } + }, + + }, + +}) + diff --git a/components/poem-audio/poem-audio.json b/components/poem-audio/poem-audio.json new file mode 100644 index 0000000..95aa132 --- /dev/null +++ b/components/poem-audio/poem-audio.json @@ -0,0 +1,8 @@ +{ + "component": true, + "usingComponents": { + "t-icon": "tdesign-miniprogram/icon/icon", + "t-progress": "tdesign-miniprogram/progress/progress", + "audio-controls": "audio-controls/audio-controls" + } +} \ No newline at end of file diff --git a/components/poem-audio/poem-audio.wxml b/components/poem-audio/poem-audio.wxml new file mode 100644 index 0000000..472b0a9 --- /dev/null +++ b/components/poem-audio/poem-audio.wxml @@ -0,0 +1,8 @@ + + + + + \ No newline at end of file diff --git a/components/poem-audio/poem-audio.wxss b/components/poem-audio/poem-audio.wxss new file mode 100644 index 0000000..393aa52 --- /dev/null +++ b/components/poem-audio/poem-audio.wxss @@ -0,0 +1,38 @@ +.poem-audio-container { + padding: 30rpx; +} + +.slider .time { + display: flex; + flex-direction: row; + justify-content: space-between; + color: #999999; + font-size: 22rpx; +} + +.controls { + display: flex; + align-items: center; + justify-content: center; +} + +.btn { + display: flex; + margin: 20rpx; + justify-content: center; + align-items: center; + background-color: #3c9cff; + color: #ffffff; +} + +.btn-large { + width: 120rpx; + height: 120rpx; + border-radius: 50%; +} + +.btn-mid { + width: 80rpx; + height: 80rpx; + border-radius: 50%; +} \ No newline at end of file diff --git a/fonts/style.wxss b/fonts/style.wxss index 6ef3a9e..52d3cff 100644 --- a/fonts/style.wxss +++ b/fonts/style.wxss @@ -1,10 +1,10 @@ @font-face { font-family: 'icon'; - src: url('https://a-1254429201.cos.ap-chengdu.myqcloud.com/poem-font/icomoon.eot?3gxqgj'); - src: url('https://a-1254429201.cos.ap-chengdu.myqcloud.com/poem-font/icomoon.eot?3gxqgj#iefix') format('embedded-opentype'), - url('https://a-1254429201.cos.ap-chengdu.myqcloud.com/poem-font/icomoon.ttf?3gxqgj') format('truetype'), - url('https://a-1254429201.cos.ap-chengdu.myqcloud.com/poem-font/icomoon.woff?3gxqgj') format('woff'), - url('https://a-1254429201.cos.ap-chengdu.myqcloud.com/poem-font/icomoon.svg?3gxqgj#icomoon') format('svg'); + src: url('https://a-1254429201.cos.ap-chengdu.myqcloud.com/poem-font/icomoon.eot?kp4sdg'); + src: url('https://a-1254429201.cos.ap-chengdu.myqcloud.com/poem-font/icomoon.eot?kp4sdg#iefix') format('embedded-opentype'), + url('https://a-1254429201.cos.ap-chengdu.myqcloud.com/poem-font/icomoon.ttf?kp4sdg') format('truetype'), + url('https://a-1254429201.cos.ap-chengdu.myqcloud.com/poem-font/icomoon.woff?kp4sdg') format('woff'), + url('https://a-1254429201.cos.ap-chengdu.myqcloud.com/poem-font/icomoon.svg?kp4sdg#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; @@ -64,3 +64,6 @@ .icon-file-text:before { content: "\e926"; } +.icon-pause:before { + content: "\e909"; +} \ No newline at end of file diff --git a/pages/poem-detail/poem-detail.json b/pages/poem-detail/poem-detail.json index 70ae6bd..533bd69 100644 --- a/pages/poem-detail/poem-detail.json +++ b/pages/poem-detail/poem-detail.json @@ -3,6 +3,7 @@ "t-tabs": "tdesign-miniprogram/tabs/tabs", "t-tab-panel": "tdesign-miniprogram/tab-panel/tab-panel", "poem-content": "/components/poem-content/poem-content", - "poem-translate": "/components/poem-translate/poem-translate" + "poem-translate": "/components/poem-translate/poem-translate", + "poem-audio": "/components/poem-audio/poem-audio" } } \ No newline at end of file diff --git a/pages/poem-detail/poem-detail.wxml b/pages/poem-detail/poem-detail.wxml index 61f54ab..a70e766 100644 --- a/pages/poem-detail/poem-detail.wxml +++ b/pages/poem-detail/poem-detail.wxml @@ -1,5 +1,5 @@ - + @@ -11,8 +11,8 @@ {{block}} - - + +