微信小程序在线音乐播放器及源码
作为一名初学者，我曾经尝试过开发微信小程序。现在，我决定分享我的作品给大家学习和参考。以下是关于在线音乐播放器的详细描述。
效果图
首先，让我们看看这个在线音乐播放器的效果图：
![效果图]( 歌曲列表:用户可以在这里浏览和选择他们喜欢的歌曲。
2. 播放控制:用户可以通过点击按钮来控制音乐的播放、暂停和停止。
3. 歌词显示:当音乐正在播放时，歌词会自动显示在屏幕上。
4. 搜索功能:用户可以输入歌曲名称或艺术家名称进行搜索。
源码
以下是在线音乐播放器的源码：
music-player.json```json{
"pages": [
{
"name": "index",
"path": "index/index"
}
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "fff",
"navigationBarTitleText": "",
"onLoad": true,
"enablePullDownRefresh": false },
"tabBar": {
"color": "000",
"selectedColor": "3bbd69",
"list": [
{
"pagePath": "index/index",
"text": ""
}
]
}
}
```
index.wxml```wxml
{{item.name}}
{{item}}
```
index.js```javascriptPage({
data: {
songList: [],
coverUrl: '',
title: '',
lyrics: []
},
onLoad: function(options) {
// 获取歌曲列表 wx.cloud.callFunction({
name: 'getSongList',
data: {}
}).then(res => {
this.setData({
songList: res.result.data });
});
// 获取当前播放的音乐信息 wx.cloud.callFunction({
name: 'getMusicInfo',
data: {}
}).then(res => {
this.setData({
coverUrl: res.result.coverUrl,
title: res.result.title });
});
// 获取歌词 wx.cloud.callFunction({
name: 'getLyrics',
data: {}
}).then(res => {
this.setData({
lyrics: res.result.lyrics });
});
},
playMusic: function() {
// 播放音乐 wx.cloud.callFunction({
name: 'playMusic',
data: {}
});
},
pauseMusic: function() {
// 暂停音乐 wx.cloud.callFunction({
name: 'pauseMusic',
data: {}
});
},
stopMusic: function() {
// 停止音乐 wx.cloud.callFunction({
name: 'stopMusic',
data: {}
});
}
});
```
player.wxml```wxml
```
player.js```javascriptPage({
data: {
coverUrl: '',
title: ''
},
onLoad: function(options) {
// 获取当前播放的音乐信息 wx.cloud.callFunction({
name: 'getMusicInfo',
data: {}
}).then(res => {
this.setData({
coverUrl: res.result.coverUrl,
title: res.result.title });
});
},
playMusic: function() {
// 播放音乐 wx.cloud.callFunction({
name: 'playMusic',
data: {}
});
},
pauseMusic: function() {
// 暂停音乐 wx.cloud.callFunction({
name: 'pauseMusic',
data: {}
});
},
stopMusic: function() {
// 停止音乐 wx.cloud.callFunction({
name: 'stopMusic',
data: {}
});
}
});
```
utils.js```javascriptfunction getSongList() {
return new Promise((resolve, reject) => {
wx.cloud.callFunction({
name: 'getSongList',
data: {}
}).then(res => {
resolve(res.result.data);
}).catch(err => {
reject(err);
});
});
}
function getMusicInfo() {
return new Promise((resolve, reject) => {
wx.cloud.callFunction({
name: 'getMusicInfo',
data: {}
}).then(res => {
resolve(res.result);
}).catch(err => {
reject(err);
});
});
}
function getLyrics() {
return new Promise((resolve, reject) => {
wx.cloud.callFunction({
name: 'getLyrics',
data: {}
}).then(res => {
resolve(res.result.lyrics);
}).catch(err => {
reject(err);
});
});
}
module.exports = { getSongList, getMusicInfo, getLyrics };
```
cloud.js```javascriptconst cloud = require('wx-server-sdk');
cloud.init({
env: 'your-env-id'
});
exports.getSongList = async (event) => {
const res = await cloud.database().collection('song_list').get();
return res.data;
};
exports.getMusicInfo = async (event) => {
const res = await cloud.database().collection('music_info').get();
return res.data[0];
};
exports.getLyrics = async (event) => {
const res = await cloud.database().collection('lyrics').get();
return res.data;
};
```
以上是在线音乐播放器的源码。这个项目使用微信小程序开发，包含了歌曲列表、播放控制、歌词显示和搜索功能。
