微信小程序-音频播放器(完善)_小程序音频播放器

作者：很楠不爱3 | 2024-04-23 12:50:23

踩

小程序音频播放器

前言：前面有一篇写了小程序的自定义播放器，这次找到了小程序官方的播放器，下面是demo

需求：实现文字转语音的功能，现有的audio播放器组件，样式不满足需要，这次的完善是直接使用微信的【音频背景】api实现的，话不多说，直接看效果图（真机调试效果）

--------------------------播放器效果如下--------------------------

请添加图片描述

上代码（wepy框架）

这次的代码是直接用小程序框架实现的，可能无法直接运行，最底下还有原生的小程序代码，实质都是一样的噢，
关键还是wx.getBackgroundAudioManager()

<template>
    <view class="article-audio-page">
        <button @tap="play">播放</button>
    </view>
</template>

<script>
    import wepy from 'wepy'
    const backgroundAudioManager = wx.getBackgroundAudioManager() // 背景音乐
    let updateInterval
    export default class Audio extends wepy.page {
        config = {
            navigationBarTitleText: ''
        }

        data = {
            IMAGE_URL_V2,
            theme: 'light',
            playing: false, // 播放状态
            pfause: false,
            playTime: 0, // 播放时长
            formatedPlayTime: '00:00:00' // 格式化后的播放时长
        }

        methods = {
           

            play() {
                backgroundAudioManager.title = '此时此刻' // 必填
                backgroundAudioManager.epname = '此时此刻' // 必填
                backgroundAudioManager.coverImgUrl = 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000'

                const that = this
                if (that.data.pause) {
                backgroundAudioManager.play()
                    this.setData({
                        playing: true,
                    })
                } else {
                    that.setData({
                        playing: true,
                    }, () => {
                        // 设置src后会自动播放
                        backgroundAudioManager.src = 'https://dldir1.qq.com/music/release/upload/t_mm_file_publish/2339610.m4a'
                    })
                }
            },

            seek(e) {
                backgroundAudioManager.seek(e.detail.value)
            },

            pause() {
                clearInterval(updateInterval)
                backgroundAudioManager.pause()
            },

            stop() {
                clearInterval(updateInterval)
                backgroundAudioManager.stop()
            },
        }
        
        formatTime(time) {
            if (typeof time !== 'number' || time < 0) {
                return time
            }

            const hour = parseInt(time / 3600, 10)
            time %= 3600
            const minute = parseInt(time / 60, 10)
            time = parseInt(time % 60, 10)
            const second = time

            return ([hour, minute, second]).map(function (n) {
                n = n.toString()
                return n[1] ? n : '0' + n
            }).join(':')
        }

        _enableInterval() {
            const that = this

            function update() {
                that.setData({
                    playTime: backgroundAudioManager.currentTime + 1,
                    formatedPlayTime: that.formatTime(backgroundAudioManager.currentTime + 1)
                })
            }
            updateInterval = setInterval(update, 1000)
        }
        
        onLoad (e) {
            
            console.log('传入的is_voice',e.is_voice)
            console.log('传入的voice_url',e.voice_url)

            
            this.theme = wx.getSystemInfoSync().theme || 'light'
            if (wx.onThemeChange) {
                wx.onThemeChange(({
                    theme
                }) => {
                    this.setData({
                        theme
                    })
                })
            }
            const that = this
            // 监听播放事件
            backgroundAudioManager.onPlay(() => {
                // 刷新播放时间
                that._enableInterval()
                that.setData({
                    pause: false,
                })
            })

            // 监听暂停事件
            backgroundAudioManager.onPause(() => {
                clearInterval(updateInterval)
                that.setData({
                    playing: false,
                    pause: true,
                })
            })

            backgroundAudioManager.onEnded(() => {
                clearInterval(updateInterval)
                that.setData({
                    playing: false,
                    playTime: 0,
                    formatedPlayTime: that.formatTime(0)
                })
            })

            backgroundAudioManager.onStop(() => {
                clearInterval(updateInterval)
                that.setData({
                    playing: false,
                    playTime: 0,
                    formatedPlayTime: that.formatTime(0)
                })
            })
        }

        onUnload () {

            clearInterval(updateInterval)
        }

        onShow () {
            if (!backgroundAudioManager.paused && backgroundAudioManager.paused !== undefined) {
                this._enableInterval()
                this.setData({
                    playing: true
                })
            }
        }
    }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162

继续上代码（原生微信小程序）

wxml:

<view class="page-body-button" bindtap="play">
	<button>播放</button>
</view>
1
2
3

js:

// const app = getApp()

const backgroundAudioManager = wx.getBackgroundAudioManager()
let updateInterval

Page({
  formatTime(time) {
    if (typeof time !== 'number' || time < 0) {
      return time
    }

    const hour = parseInt(time / 3600, 10)
    time %= 3600
    const minute = parseInt(time / 60, 10)
    time = parseInt(time % 60, 10)
    const second = time

    return ([hour, minute, second]).map(function (n) {
      n = n.toString()
      return n[1] ? n : '0' + n
    }).join(':')
  },
  onShow() {
    if (!backgroundAudioManager.paused && backgroundAudioManager.paused !== undefined) {
      this._enableInterval()
      this.setData({
        playing: true
      })
    }

  },


  data: {
    theme: 'light',
    playing: false, // 播放状态
    pause: false,
    playTime: 0, // 播放时长
    formatedPlayTime: '00:00:00' // 格式化后的播放时长
  },

  play() {
    backgroundAudioManager.title = '此时此刻' // 必填
    backgroundAudioManager.epname = '此时此刻' // 必填
    // backgroundAudioManager.singer = '许巍' // 
    backgroundAudioManager.coverImgUrl = 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000'

    const that = this
    if (that.data.pause) {
      backgroundAudioManager.play()
      this.setData({
        playing: true,
      })
    } else {
      that.setData({
        playing: true,
      }, () => {
        // 设置src后会自动播放
        backgroundAudioManager.src = 'https://dldir1.qq.com/music/release/upload/t_mm_file_publish/2339610.m4a'
      })
    }
  },

  seek(e) {
    backgroundAudioManager.seek(e.detail.value)
  },

  pause() {
    clearInterval(updateInterval)
    backgroundAudioManager.pause()

  },

  stop() {
    clearInterval(updateInterval)
    backgroundAudioManager.stop()
  },

  _enableInterval() {
    const that = this

    function update() {
      that.setData({
        playTime: backgroundAudioManager.currentTime + 1,
        formatedPlayTime: that.formatTime(backgroundAudioManager.currentTime + 1)
      })
    }
    updateInterval = setInterval(update, 1000)
  },

  onUnload() {
    clearInterval(updateInterval)
  },

  onLoad() {
    this.setData({
      theme: wx.getSystemInfoSync().theme || 'light'
    })

    if (wx.onThemeChange) {
      wx.onThemeChange(({
        theme
      }) => {
        this.setData({
          theme
        })
      })
    }
    const that = this
    // 监听播放事件
    backgroundAudioManager.onPlay(() => {
      // 刷新播放时间
      that._enableInterval()
      that.setData({
        pause: false,
      })
    })

    // 监听暂停事件
    backgroundAudioManager.onPause(() => {
      clearInterval(updateInterval)
      that.setData({
        playing: false,
        pause: true,
      })
    })

    backgroundAudioManager.onEnded(() => {
      clearInterval(updateInterval)
      that.setData({
        playing: false,
        playTime: 0,
        formatedPlayTime: that.formatTime(0)
      })
    })

    backgroundAudioManager.onStop(() => {
      clearInterval(updateInterval)
      that.setData({
        playing: false,
        playTime: 0,
        formatedPlayTime: that.formatTime(0)
      })
    })
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146

参考的微信官方文档API就是下面这个噢

链接我就放这里啦微信小程序官方文档
在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/473986