a8204 基于微信小程序的音乐播放器微信小程序的研究与实现服务器端Java+Mysql+Servlet 文档源码

音乐播放微信小程序

1.项目描述
2. 绪论
3.项目功能
4.界面展示
5.源码获取

1.项目描述

随着科技的发展，手机在我们生活中起到了重要的作用。软件作为手机重要的一部分，用户体验显得尤为重要。微信小程序一起操作便捷、用户基数大、分享便利、既用即走等特点。根据微信小程序的特点，设计开发了基于微信小程序的音乐播放器。目的是将传统的音乐播放方式彻底的解脱出来，提高效率，减轻工作人员以往繁忙的工作，减少出错的概率。
根据需求，确定系统采用JSP技术，JAVA作为编程语言，MySQL作为数据库。整个系统要操作方便、易于维护、灵活实用。
关键词：微信小程序；音乐播放器； JSP； MYSQL

Research on music player based on Wechat applet
Abstract
With the development of technology, mobile phones have played an important role in our lives. As software is an important part of mobile phones, user experience is particularly important. WeChat applets are easy to operate together, have a large user base, convenient sharing, and ready-to-use features. According to the characteristics of the WeChat applet, a music player based on the WeChat applet was designed and developed. The purpose is to completely get rid of the traditional way of playing music, improve efficiency, reduce the busy work of staff in the past, and reduce the probability of errors.
According to the requirements, determine that the system uses JSP technology, JAVA as the programming language, and MySQL as the database. The entire system should be easy to operate, easy to maintain, flexible and practical.
Keywords: WeChat Mini Program; music player; JSP; MYSQL

2. 绪论

引言
近年来，微信发展规模越来越大，越来越多的人开始使用微信，目前智能手机系统的普及，人们手机上基本都有了微信，根据去年公布的一组数据中可知，微信去年最高用户量达到10亿多；而建立在微信平台基础上的小程序凭着它不用安装、不占内存、使用便捷、用完即走等众多优点，小程序借着微信平台快速成长，也为各行业的发展带来了极大的便利，这使得基于微信小程序的系统应运而生。基于以上微信的发展，开发了本基于微信小程序的音乐播放器，为用户提供一个便利的平台。

** 系统开发意义**
随着互联网的发展，传统生活变得更加方便快捷，许多事物都可以跟互联网相连接，日常生活离不开计算机更离不开互联网，例如生活中最平常的衣食住行，都有其相关的智能产品，所以科技改变生活，传统的生活方式面对互联网的新浪潮的冲击，已经渐渐退出了历史舞台，相信未来的某一时刻，传统的生活方式将进入全智能化的阶段。本次开发的基于微信小程序的音乐播放器相对于传统的APP脱离了平台的限制，所以基于微信小程序的音乐播放器也是信息时代发展的必然趋势。

3.项目功能

本系统实现一个基于微信小程序的音乐播放器。具体功能描述如下：
1.音乐馆：实现歌曲榜，歌手的列表显示，可以按：歌曲、歌单、专辑进行搜索，可以按分类浏览歌曲，可以查看歌曲信息，歌手信息，可以播放或暂停歌曲。
2.私人FM：实现电台的列表显示，可以调频，可以播放或暂停歌曲。
3.我的：实现播放列表的显示，可以播放音乐。

4.界面展示

音乐馆实现
此页面实现歌曲榜，歌手的列表显示，可以按：歌曲、歌单、专辑进行搜索。界面如下图：
在这里插入图片描述

图5.1音乐馆页面

getResult:function(res){console.log("url",url)var self=this;wx.request({url: url+"Index/getResult",success:function(res){console.log("取得首页内容",res);if(res.data.code==0){app.globalData.banner=res.data.banner,app.globalData.newSong=res.data.newSongself.setData({newSong: res.data.newSong,banner: res.data.banner,list: res.data.list,show:true,class:res.data.class});}else{wx.showModal({title: '警告',content: '服务器返回数据错误',})}}});
},

4.2 音乐播放页面
此页面实现用户可以播放或暂停音乐。界面如下图：
在这里插入图片描述

图5.2音乐播放页面

playmusic: function (id) {var self = this;wx.request({url: url + 'song?id=' + id,success: function (res) {app.globalData.curplay = res.data.songs[0];if (!res.data.songs[0].mp3Url) {console.log("歌曲链接不存在，歌曲下架了");self.setData({disable: true})} else {wx.playBackgroundAudio({dataUrl: res.data.songs[0].mp3Url,title: res.data.songs[0].name,success: function (res) {app.globalData.globalStop = false;app.globalData.playtype = 1}});wx.setNavigationBarTitle({ title: app.globalData.curplay.name + "-" + app.globalData.curplay.artists[0].name });}}});
}

4.3 歌曲列表页面
此页面实现歌曲的列表显示，可以播放歌曲。界面如下图：
在这里插入图片描述

图5.3歌曲列表页面

wx.request({url: url+'Index/songList',data:{id:e.id,},success:function(res){self.setData({song: res.data.song,banner: res.data.banner,show: true,          });}
})

4.4 播放列表页面
此页面实现播放的列表显示，可以播放歌曲。界面如下图：
在这里插入图片描述

图5.4播放列表页面

onLoad: function (options) {var self=this;self.setData({userInfo: app.globalData.userInfo,hasLogin:app.globalData.hasLogin,newSong: app.globalData.newSong,curplay: app.globalData.curplay,});
},

4.5 歌手详情页面
此页面实现歌手详情的显示，可以查看歌曲信息，歌手信息。界面如下图：
在这里插入图片描述

图5.5歌手详情页面

onLoad: function (e) {console.log(e)var self=this;wx.setNavigationBarTitle({title:e.name});wx.request({url: url + 'Index/getSingerInfo?id=' + e.id,success: function (res) {console.log('singerInfo List:', res);self.setData({info: res.data.info,loading: true,songs:res.data.songs});}})console.log(this.data)
},

4.6 私人Fm页面
此页面实现电台的列表显示，可以调频，可以播放或暂停歌曲。界面如下图：
在这里插入图片描述

图5.6私人Fm页面

onLoad: function (options) {var self=this;wx.request({url: url+'Index/radioList',success:function(res){console.log('radioList:',res);self.setData({banner: app.globalData.banner,radioList: res.data,show: true});}})console.log(this.data)
},