devbox
秋刀鱼在做梦
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

简易音乐播放小程序_微信小程序音乐播放器歌词

作者：秋刀鱼在做梦 | 2024-08-12 10:13:05

赞

踩

微信小程序音乐播放器歌词

今天想要分享的一个项目是作者自己在暑假实训期间制作的一款仿网易音乐的音乐播放小程序，将会为大家展示小程序的具体功能以及实现代码，比较适合前端初学者拿来参考。（本人也是技艺不精，若有说的不对的地方，望指摘，勿喷，友好交流）

一、项目介绍

本音乐播放小程序有歌曲列表，个人信息，搜索三个模块

二、小程序的效果图

歌曲列表界面：

这部分相当于一个简易的首页部分，包含轮播图，歌曲列表，搜索框按钮，点击搜索框按钮就会发生跳转，然后跳转到搜素界面

搜索界面：

这部分是搜索界面，在搜索框内输入想要搜索的歌曲或者歌手就会跳转到歌曲列表界面，然后在轮播图的下面展示出搜索的结果

歌曲播放界面：

点击歌曲列表后面的播放按钮就可以跳转到歌曲的播放界面并进行播放，歌曲播放界面有暂停，上一首，下一首，随机播放，单曲循环等功能

歌词滚动界面：

歌曲播放界面向左滑动便可以到达歌词部分，根据歌曲进度使对应的歌词部分显红

个人信息界面：

该部分是个人信息界面

三、部分代码实现

歌曲列表部分的：

  1. // index.js
  2. [ ] // 获取应用实例
  3. const app = getApp()
  4.  
  5. Page({
  6.   data: {
  7.     // 轮播图数组
  8.     'swiperList':[{
  9.       'goods_id':'1',
  10.       'image_src':'/images/lunbo/lunbo1.jpg',
  11.       'open_type':'navigate'
  12.     },
  13.     {
  14.       'goods_id':'2',
  15.       'image_src':'/images/lunbo/lunbo2.jpg',
  16.       'open_type':'navigate'
  17.     },
  18.     {'goods_id':'3',
  19.       'image_src':'/images/lunbo/lunbo3.jpg',
  20.       'open_type':'navigate'
  21.     }
  22.   ] ,
  23.   //歌曲数组
  24.   songs:[],
  25. // 定义歌曲的数组
  26.  
  27.   },
  28.   onLoad: function (options) {
  29.     
  30.   },
  31.  
  32.   onShow(){
  33.     const app=getApp()
  34.     
  35.     let songs=app.globalData.data
  36.     console.log(songs);
  37.     this.setData({
  38.       songs,
  39.     })
  40.  
  41.   },
  42.   // 点击事件函数
  43.   gotoplay:function(e){
  44.     var id = e.currentTarget.dataset.id;
  45.     // 定义一个空数组
  46.     var ids = [];
  47.     // 遍历歌曲列表
  48.     for(var i=0;i<this.data.songs.length;i++){
  49.       ids.push(this.data.songs[i].id);
  50.     }
  51.     console.log("点击事件进入的方法");
  52.     wx.navigateTo({
  53.       url:'/pages/paly/play?mid='+ id + "&ids=" + ids,
  54.     })
  55.   }
  56. })

歌曲播放部分：

  1. // pages/paly/play.js
  2. Page({
  3.  
  4.   /**
  5.    * 页面的初始数据
  6.    */
  7.   data: {
  8.     state:"play",
  9.     id:"",
  10.     ids:[],
  11.     song:null,
  12.     lyricArray:[],
  13.     // 竖向滚动条初始值为0
  14.     marginTop:0,
  15.     currentIndex:0,
  16.     // 播放模式
  17.     mode:'loop',
  18.     // 播放时间
  19.     currentTime:"00:00",
  20.     // 总时间
  21.     timeLength:"03:30",
  22.     max:0,
  23.     move:0,
  24.     likeState:"unlike"
  25.   },
  26.  
  27.     /**
  28.    * 生命周期函数--监听页面加载
  29.    */
  30. // 控制歌曲的播放状态
  31. playOrPause:function(){
  32.   var musicState=this.data.state;
  33.   if(musicState=='play'){
  34.     this.setData({
  35.       state:'pause'
  36.     })
  37.     this.audioCtx.pause()
  38.   }else{
  39.     this.setData({
  40.       state:'play'
  41.     })
  42.     this.audioCtx.play()
  43.   }
  44. },
  45.   // 上一首歌曲的函数
  46.   prevSong:function(){
  47.     var currentId = this.data.id;
  48.     // 定义一个变量记录当前歌曲的下标
  49.     var index = 0;
  50.     // 根据id值找出当前歌曲的下标
  51.     for(var i =0;i<this.data.ids.length;i++){
  52.       // 判断一下当前歌曲是否一致
  53.       if(currentId == this.data.ids[i]){
  54.         index = i;
  55.         break;
  56.       }
  57.     }
  58.       var prevIndex =index ==0?this.data.ids.length-1 : index-1;
  59.       var prevId = this.data.ids[prevIndex];
  60.       // 修改当前歌曲的id
  61.       this.setData({
  62.         id:prevId
  63.       })
  64.       // 调用获取歌曲详情的函数
  65.       this.getSongInfoById();
  66.       // 播放新的歌曲
  67.       this.audioCtx.play();
  68.   },
  69.   // 下一首歌曲的函数
  70.   nextSong:function(){
  71.     var currentId = this.data.id;
  72.     // 定义一个变量记录当前歌曲的下标
  73.     var index = 0;
  74.     // 根据id值找出当前歌曲的下标
  75.     for(var i =0;i<this.data.ids.length;i++){
  76.       // 判断一下当前歌曲是否一致
  77.       if(currentId == this.data.ids[i]){
  78.         index = i;
  79.         break;
  80.       }
  81.     }
  82.       var nextIndex =index ==this.data.ids.length-1 ? 0: index+1;
  83.       var nextId = this.data.ids[nextIndex];
  84.       // 修改当前歌曲的id
  85.       this.setData({
  86.         id:nextId
  87.       })
  88.       // 调用获取歌曲详情的函数
  89.       this.getSongInfoById();
  90.       // 播放新的歌曲
  91.       this.audioCtx.play();
  92.   },
  93.   // 切换播放模式的方法
  94.   changeMode:function(params){
  95.     var currentMode =this.data.mode;
  96.     if(currentMode=='loop'){
  97.       this.setData({
  98.         mode:'single'
  99.       })
  100.     }else{
  101.       this.setData({
  102.         mode:'loop'
  103.       })
  104.     }
  105.   },
  106.   // 当歌曲播放完后的函数
  107.   changeMusic:function () {
  108.     // 判断当前的模式
  109.     var mode = this.data.mode;
  110.     var currentId = this.data.id;
  111.     // 单曲循环
  112.     if(mode == 'single'){
  113.       // 单曲循环设置自己原本的id
  114.       this.setData({
  115.         id:currentId 
  116.       })
  117.       // 刷新播放状态
  118.       this.getSongInfoById();
  119.       this.audioCtx.play();
  120.     }else{
  121.       this.nextSong();
  122.     }
  123.   },
  124.   // 收藏歌曲的方法
  125.   songLove:function(params){
  126.     var currentState =this.data.likeState;
  127.     if(currentState=='unlike'){
  128.       this.setData({
  129.         likeState:'like'
  130.       })
  131.     }else{
  132.       this.setData({
  133.         likeState:'unlike'
  134.       })
  135.     }
  136.   },
  137.   // 根据歌曲id来获取歌词的方法
  138.   getLyricById:function(){
  139.     var that = this;
  140.     var currentId = this.data.id;
  141.     wx.request({
  142.       url: 'http://music.163.com/api/song/lyric?os=pc&id='+ currentId +'&lv=-1&kv=-1&tv=-1',
  143.       success:function(result){
  144.         // 解析歌词在字符串里
  145.         var lyrics = result.data.lrc.lyric;
  146.         // 调用解析歌词的方法
  147.         var result = that.parseLyric(lyrics);
  148.         // 调用去掉空歌词的方法
  149.         var finalResult = that.sliceNull(result);
  150.         that.setData({
  151.           lyricArray:finalResult
  152.         })
  153.       }
  154.     })
  155.   },
  156.   // 解析歌词的方法(正则表达式)
  157.   parseLyric:function(lyrics){
  158.     // 存储时间和歌词且一一对应
  159.     var lyricResult =[];
  160.     // 将歌词组成的字符串组成每句歌词组成的数组
  161.     var lyricArray = lyrics.split("\n");
  162.     // 判断最后一个元素是否为空。如果为空则删除
  163.     if(lyricArray[lyricArray.length-1] == ""){
  164.       lyricArray.pop();
  165.     }
  166.     var pattern = /\[\d{2}:\d{2}\.\d{2,3}\]/;
  167.     // 遍历数组中的每一句歌词
  168.     lyricArray.forEach(function(v,i,a){
  169.       var real_lyric = v.replace(pattern,"");
  170.       // 对每一句歌词处理，将时间单独提取出来
  171.       var time = v.match(pattern);
  172.       
  173.       // 时间里的中括号不要
  174.       // js中的最后一个元素的下标是长度-1或者-1
  175.       if(time !=null){
  176.       var timeResult = time[0].slice(1,-1);
  177.       // 对结果进行一个切分
  178.       var timeArray = timeResult.split(":");
  179.       var finalTime = parseFloat(timeArray[0])*60 +parseFloat(timeArray[1]);
  180.       lyricResult.push([finalTime,real_lyric]);
  181.       }
  182.     })
  183.     // 返回歌词时间数组
  184.     return lyricResult;
  185.   },
  186.   // 去掉空歌词，保留非空歌词的方法
  187.   sliceNull:function(lyricArray){
  188.     var result = [];
  189.     for(var i=0;i<lyricArray.length;i++){
  190.       if(lyricArray[i][1]!=""){
  191.         result.push(lyricArray[i]);
  192.       }
  193.     }
  194.     return result;
  195.   },
  196.   // 歌词与时间匹配的方法
  197.   //播放进度触发
  198.   changeTime:function(e){
  199.     var currentTime = e.detail.currentTime;
  200.     var lyricArray = this.data.lyricArray;
  201.     if(this.data.currentIndex>=8){
  202.       this.setData({
  203.         marginTop:(this.data.currentIndex-8)*30
  204.       })
  205.     }
  206.     if(this.data.currentIndex == lyricArray.length-2){
  207.       if(currentTime>=lyricArray[lyricArray.length-1][0]){
  208.         this.setData({
  209.           currentIndex:lyricArray.length-1
  210.         })
  211.       }
  212.     }else{
  213.       for(var i=0;i<lyricArray.length-1;i++){
  214.         if(currentTime>=lyricArray[i][0] && currentTime<lyricArray[i+1][0]){
  215.           this.setData({
  216.             currentIndex:i
  217.           })
  218.         }
  219.       }
  220.     }
  221.     //进度条更新
  222.     var timeLength = e.detail.duration;
  223.     var sum_m = Math.floor(timeLength/60);
  224.     var sum_s = Math.floor(timeLength%60);
  225.     // 个位数补齐0
  226.     if(sum_m<10){
  227.       sum_m="0"+sum_m
  228.     }
  229.     if(sum_s<10){
  230.       sum_s="0"+sum_s
  231.     }
  232.     // 定义播放时间
  233.     var play_m = Math.floor(currentTime/60);
  234.     var play_s = Math.floor(currentTime%60);
  235.     // 个位数补齐0
  236.     if(play_m<10){
  237.       play_m="0"+play_m
  238.     }
  239.     if(play_s<10){
  240.       play_s="0"+play_s
  241.     }
  242.     // 进度条更新
  243.     this.setData({
  244.       currentTime:play_m+":"+play_s,
  245.       timeLength:sum_m+":"+sum_s,
  246.       max:timeLength,
  247.       move:currentTime
  248.     })
  249.  
  250.   },
  251.   // 进度条拖拽的方法
  252.   sliderChange:function(e){
  253.     var that = this;
  254.     var currentValue = e.detail.value;
  255.      this.setData({
  256.        move:currentValue
  257.      })
  258.     //  跳转到指定播放的秒数位置
  259.      that.audioCtx.seek(currentValue);
  260.     // 修改当前播放时间
  261.     // this.setData({
  262.     //   action:{
  263.     //     method:'setCurrentTime',
  264.     //     data:currentValue
  265.     //   }
  266.     // })
  267.   },
  268.   // 根据歌曲的id找歌曲的详情
  269.   getSongInfoById:function(){
  270.     var currentId = this.data.id;
  271.     var that = this;
  272.     wx.request({
  273.       url: 'https://music.163.com/api/song/detail/?id='+ currentId + '&ids=['+ currentId +']',
  274.       success:function(result){
  275.         var musicInfo = result.data.songs[0];
  276.         console.log(musicInfo);
  277.         that.setData({
  278.           song:musicInfo
  279.         })
  280.       }
  281.     })
  282.   },
  283.  
  284.   onLoad:function (options) {
  285.     var mid = options.mid;
  286.     var idStr = options.ids;
  287.     var ids = idStr.split(",");
  288.     this.setData({
  289.       id:mid,
  290.       ids:ids
  291.     })
  292.     this.getSongInfoById();
  293.     this.getLyricById();
  294.         
  295.     },
  296.   
  297.  /**
  298.    * 生命周期函数--监听页面初次渲染完成
  299.    */
  300.   onReady:function() {
  301.      this.audioCtx = wx.createAudioContext('myAudio');
  302.     this.audioCtx.play();
  303.   },
  304.   /**
  305.    * 生命周期函数--监听页面显示
  306.    */
  307.   onShow() {
  308.  
  309.   },
  310.  
  311.   /**
  312.    * 生命周期函数--监听页面隐藏
  313.    */
  314.   onHide() {
  315.  
  316.   },
  317.  
  318.   /**
  319.    * 生命周期函数--监听页面卸载
  320.    */
  321.   onUnload() {
  322.  
  323.   },
  324.  
  325.   /**
  326.    * 页面相关事件处理函数--监听用户下拉动作
  327.    */
  328.   onPullDownRefresh() {
  329.  
  330.   },
  331.  
  332.   /**
  333.    * 页面上拉触底事件的处理函数
  334.    */
  335.   onReachBottom() {
  336.  
  337.   },
  338.  
  339.   /**
  340.    * 用户点击右上角分享
  341.    */
  342.   onShareAppMessage() {
  343.  
  344.   }
  345. })
  1. <!--pages/paly/play.wxml-->
  2. <view class="content">
  3. <image class="big_img"
  4. src="{{song.album.picUrl}}"></image>
  5. <view class="title">{{song.name}}</view>
  6. <!-- 中间封面和歌词 -->
  7. <view class="middle">
  8. <swiper class="middle-swiper">
  9. <!-- 封面区域 -->
  10. <swiper-item class="cd-wrapper">
  11. <view class="cd-image">
  12. <image style="animation-play-state:{{state == 'play'? 'running': 'paused'}}" src="{{song.album.picUrl}}"></image>
  13. </view>
  14. </swiper-item>
  15. <!-- 歌词区域 -->
  16. <swiper-item>
  17. <!-- scroll-view可以滚动 -->
  18. <scroll-view class="lyric-wrapper" scroll-y="true" scroll-top="{{marginTop}}">
  19. <!-- 存放所有歌词 -->
  20. <view class="contentArray">
  21. <block wx:for="{{lyricArray}}" wx:for-index="index" wx:for-item="lyric">
  22. <text class="{{currentIndex == index?'currentLyric':''}}">{{lyric[1]}}</text>
  23. </block>
  24. </view>
  25. </scroll-view>
  26. </swiper-item>
  27. </swiper>
  28. </view>
  29. <!-- 播放控制按钮 -->
  30. <!-- 进度条 -->
  31. <view class="timeBox">
  32. <view class="play_time">{{currentTime}}</view>
  33. <!-- max代表总的长度，value是当前进度 -->
  34. <slider bindchange="sliderChange" activeColor="red" block-size="14" max="{{max}}" value="{{move}}"></slider>
  35. <view class="end_time">{{timeLength}}</view>
  36. </view>
  37. <!-- 播放相关的按钮 -->
  38. <view class="controls">
  39. <!-- 切换上一首歌曲 -->
  40. <image bindtap="changeMode" src="/images/tabar/{{mode =='loop'? 'loop' : 'single'}}.png"></image>
  41. <image bindtap="prevSong" src="/images/tabar/prev.png"></image>
  42. <image  bindtap="playOrPause" src="/images/tabar/{{state =='play'? 'pause' : 'play'}}.png"></image>
  43. <image bindtap="nextSong" src="/images/tabar/next.png"></image> 
  44. <image bindtap="songLove" src="/images/tabar/{{likeState =='unlike'? 'unlike1':'like'}}.png"></image>
  45. </view>
  46. </view>
  47. <!-- 当播放进度改变时触发changtime函数 -->
  48. <audio bindended="changeMusic" bindtimeupdate="changeTime" src="http://music.163.com/song/media/outer/url?id={{id}}.mp3" id="myAudio">
  49. </audio>

最后，说一下本人的学习心得，前端相关学习视频推荐，b站黑马程序员pink老师系列，本人认为作为前端的初学者来说，pink老师的课风趣幽默，技术知识点讲的非常细致，其他的同学们可以去参考看看。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/秋刀鱼在做梦/article/detail/969131
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号