千家信息网

微信小程序如何制作音乐播放器

发表于:2025-01-20 作者:千家信息网编辑
千家信息网最后更新 2025年01月20日,这篇文章主要介绍"微信小程序如何制作音乐播放器",在日常操作中,相信很多人在微信小程序如何制作音乐播放器问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答"微信小程序如何制作
千家信息网最后更新 2025年01月20日微信小程序如何制作音乐播放器

这篇文章主要介绍"微信小程序如何制作音乐播放器",在日常操作中,相信很多人在微信小程序如何制作音乐播放器问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答"微信小程序如何制作音乐播放器"的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

  这个页面分为3个部分:顶部信息栏(歌曲名/专辑名),中间的唱片图,以及底下的控制按钮。

  首先是信息栏:

  1. {{playingMusic.name}}

  2. *{{item.name}}

复制代码

  这部分很简单,与我们前面写过的类似,多个歌手之间用"*"分隔。格式文件为:

  1. .song-info {

  2. width:100%;

  3. padding:30rpx;

  4. box-sizing:border-box;

  5. text-align:center;

  6. }

  7. .song-title {

  8. display:block;

  9. width:100%;

  10. color:#fff;

  11. font-size:36rpx;

  12. line-height:60rpx;

  13. overflow:hidden;

  14. white-space:nowrap;

  15. text-overflow:ellipsis;

  16. }

  17. .song-subtitle {

  18. display:block;

  19. width:100%;

  20. font-size:28rpx;

  21. line-height:40rpx;

  22. color:rgba(255,255,255,.6);

  23. overflow:hidden;

  24. white-space:nowrap;

  25. text-overflow:ellipsis;

  26. }

复制代码

  然后是中间的图片,这部分我们以动画形式表现,让唱片一直旋转,先看布局文件:

  1. "cd-gan"是唱片部分里白色的播放杆部分,"cd-inner"是唱片部分,在这里为它添加表示唱片的黑色背景,然后在里门用小一圈的"cd-img"来加载我们获取的网络图片。最后为整个唱片添加动画"cd-animation"。这些工作全部由格式文件完成。

  2. .cd-info {

  3. position: relative;

  4. width: 100%;

  5. text-align: center;

  6. padding-top: 120rpx;

  7. }

  8. .cd-gan {

  9. position: absolute;

  10. left: 50%;

  11. margin-top: -80rpx;

  12. margin-left: -150rpx;

  13. display: block;

  14. width: 300rpx;

  15. height: 200rpx;

  16. background: url('../../resources/images/cd_g.png');

  17. background-size: cover;

  18. z-index: 10;

  19. }

  20. .cd-inner {

  21. position: relative;

  22. display: inline-block;

  23. z-index: 4;

  24. height: 500rpx;

  25. width: 500rpx;

  26. background: url('../../resources/images/cd_b.png');

  27. background-size: cover;

  28. text-align: center;

  29. padding-top: 100rpx;

  30. box-sizing: border-box;

  31. }

  32. .cd-animation {

  33. -webkit-animation: circle 10s infinite linear;

  34. animation: circle 10s infinite linear;

  35. }

  36. .cd-img {

  37. display: inline-block;

  38. width: 300rpx;

  39. height: 300rpx;

  40. border-radius: 50%;

  41. }

  42. @keyframes circle {

  43. 0% {

  44. transform: rotate(0deg);

  45. }

  46. 100% {

  47. transform: rotate(360deg);

  48. }

  49. }

复制代码

  这里面大多数的代码相信大家已经很熟悉了,重点看一下"cd-animation"这一部分,这里加载了动画"circle"并设置了动画时长与无限循环,这样就实现了在音乐播放时,唱片一直旋转的效果。"circle"动画我们使用关键帧keyframes来实现。

  完成这两部分后我们以一个view来包裹它们,确定它在页面的位置。

  1. {{playingMusic.name}}

  2. *{{item.name}}

  3. .main-box {

  4. position: absolute;

  5. top: 0;

  6. bottom: 308rpx;

  7. z-index: 3;

  8. width: 100%;

  9. background: rgba(0, 0, 0, 0.2);

  10. }

复制代码

  接着我们完成底下的操作部分。

  1. {{currTimeStr}}

  2. {{musicTimeStr}}

复制代码

  操作控制部分由最上边的进度条部分"slider-box"和底下的操作按钮"mucis-ctr"组成。进度条我们使用slider组件,两段用两个text组件来显示当前播放时间与总时长。操作按钮部分,首先是播放模式的按钮,根据playType的值,改变顺序/随机/单曲的播放模式并对应加载不同的图片。然后是3个按钮,分别表示前一首/播放/下一首。最后是显示播放列表的按钮。

  格式文件为:

  1. .slider-box {

  2. box-sizing: border-box;

  3. padding: 20rpx 130rpx;

  4. }

  5. .slider-text {

  6. position: absolute;

  7. display: block;

  8. width: 100rpx;

  9. height: 40rpx;

  10. line-height: 40rpx;

  11. font-size: 24rpx;

  12. color: #fff;

  13. }

  14. .st-l {

  15. left: 60rpx;

  16. }

  17. .st-r {

  18. top: 20rpx;

  19. right: 40rpx;

  20. text-align: right;

  21. }

  22. .slider-inner {

  23. width: 100%;

  24. }

  25. .ctre-box {

  26. height: 308rpx;

  27. position: absolute;

  28. bottom: 0;

  29. z-index: 3;

  30. width: 100%;

  31. background: rgba(0, 0, 0, 0.2);

  32. }

  33. .music-ctr {

  34. position: relative;

  35. padding: 20rpx 120rpx;

  36. }

  37. .music-sort {

  38. position: absolute;

  39. left: 20rpx;

  40. width: 108rpx;

  41. height: 108rpx;

  42. }

  43. .ms-loop {

  44. background: url("../../resources/images/play_icn_loop.png");

  45. background-size: cover;

  46. }

  47. .ms-one {

  48. background: url("../../resources/images/play_icn_one.png");

  49. background-size: cover;

  50. }

  51. .ms-shuffle {

  52. background: url("../../resources/images/play_icn_shuffle.png");

  53. background-size: cover;

  54. }

  55. .music-list-btn {

  56. position: absolute;

  57. top: 36rpx;

  58. right: 20rpx;

  59. width: 108rpx;

  60. height: 108rpx;

  61. background: url("../../resources/images/play_icn_src.png");

  62. background-size: cover;

  63. }

  64. .mc-inner {

  65. text-align: center;

  66. }

  67. .mci-icon {

  68. display: inline-block;

  69. width: 142rpx;

  70. height: 142rpx;

  71. }

  72. .mci-prev {

  73. background: url("../../resources/images/play_btn_prev.png");

  74. background-size: cover;

  75. }

  76. .mci-play {

  77. background: url("../../resources/images/play_btn_play.png");

  78. background-size: cover;

  79. }

  80. .mci-pause {

  81. background: url("../../resources/images/play_btn_pause.png");

  82. background-size: cover;

  83. }

  84. .mci-next {

  85. background: url("../../resources/images/play_btn_next.png");

  86. background-size: cover;

  87. }

复制代码

  最后写一下播放列表的布局:

  1. 播放列表(185)

  2. 清空

  3. {{item.name}}

  4. 关闭

复制代码

  格式文件为:

  1. .play-list {

  2. position: absolute;

  3. top: 20%;

  4. bottom: 0;

  5. left: 0;

  6. width: 100%;

  7. z-index: 99;

  8. background: rgba(255, 255, 255, 0.95);

  9. }

  10. .play-list-header {

  11. line-height: 88rpx;

  12. font-size: 32rpx;

  13. text-align: center;

  14. border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);

  15. }

  16. .play-list-clear {

  17. position: absolute;

  18. right: 30rpx;

  19. font-size: 28rpx;

  20. color: rgba(0, 0, 0, 0.6);

  21. }

  22. .play-list-bottom {

  23. position: absolute;

  24. width: 100%;

  25. bottom: 0;

  26. height: 100rpx;

  27. line-height: 100rpx;

  28. text-align: center;

  29. font-size: 32rpx;

  30. border-top: 2rpx solid rgba(0, 0, 0, 0.1);

  31. }

  32. .play-list-inner {

  33. position: absolute;

  34. top: 90rpx;

  35. bottom: 102rpx;

  36. width: 100%;

  37. overflow-x: hidden;

  38. overflow-y: auto;

  39. padding-left: 20rpx;

  40. }

  41. .play-item {

  42. position: relative;

  43. widows: 100%;

  44. box-sizing: border-box;

  45. padding-right: 90rpx;

  46. height: 88rpx;

  47. line-height: 88rpx;

  48. font-size: 30rpx;

  49. border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);

  50. white-space: nowrap;

  51. overflow: hidden;

  52. text-overflow: ellipsis;

  53. }

复制代码

  这里使用"z-index: 99;background: rgba(255, 255, 255, 0.95);"使播放列表覆盖部分音乐播放页面且背景半透明。

  最后我们使用一个view来为整个页面加载背景,这个背景为我们获取的图片加上模糊效果。最后用一个view包裹所有布局。

  1. ...

复制代码

  使用格式文件添加模糊效果:

  1. .paly-view {

  2. display: block;

  3. position: relative;

  4. width: 100%;

  5. height: 100%;

  6. overflow: hidden;

  7. }

  8. .blur {

  9. filter: blur(80rpx);

  10. }

  11. .bg {

  12. position: absolute;

  13. left: 0;

  14. right: 0;

  15. top: 0;

  16. bottom: 0;

  17. background-size: cover;

  18. background-position: bottom center;

  19. }

复制代码

  最后我们加载数据:

  1. var app = getApp()

  2. Page({

  3. data: {

  4. playList: [],

  5. playIndex: 0,

  6. showPlayList: true,

  7. playingMusic: {},

  8. musicTime: 0,

  9. currTime: 0,

  10. musicTimeStr: 0,

  11. currTimeStr: 0,

  12. isPlay: false,

  13. playInv: 0,

  14. playPro: '',

  15. playType: 1

  16. },

  17. onLoad: function (options) {

  18. // 页面初始化 options为页面跳转所带来的参数

  19. var self = this;

  20. var list = app.globalData.playList;

  21. var playingMusic = null;

  22. if (list.length) {

  23. var index = app.globalData.playIndex;

  24. index = (list.length - 1 < index) ? list.length - 1 : index;

  25. playingMusic = list[index];

  26. this.setData({

  27. playList: list,

  28. playIndex: index,

  29. playingMusic: playingMusic

  30. });

  31. }

  32. wx.playBackgroundAudio({

  33. dataUrl: list[index].url,

  34. title: list[index].title,

  35. coverImgUrl: list[index].img,

  36. success: function () {

  37. },

  38. fail: function () {

  39. console.log('播放失败!');

  40. }

  41. });

  42. },

  43. changePlayType: function (e) {

  44. var dataSet = e.currentTarget.dataset;

  45. if (dataSet.type == 1) {

  46. this.setData({

  47. playType: 2

  48. });

  49. }

  50. if (dataSet.type == 2) {

  51. this.setData({

  52. playType: 0

  53. });

  54. }

  55. if (dataSet.type == 0) {

  56. this.setData({

  57. playType: 1

  58. });

  59. }

  60. },

  61. closePlayList: function (e) {

  62. this.setData({

  63. showPlayList: true

  64. })

  65. },

  66. showPlayList: function (e) {

  67. this.setData({

  68. showPlayList: false

  69. })

  70. },

  71. //三个按钮的点击事件

  72. pauseMusic: function () {

  73. },

  74. playNextMusic: function () {

  75. },

  76. playPreMusic:function(){

  77. },

  78. })

到此,关于"微信小程序如何制作音乐播放器"的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注网站,小编会继续努力为大家带来更多实用的文章!

0