1. Toy模板网首页
  2. > Toy博客

微信小程序--音乐播放器

9月前 作者：河里的草 分类：Toy博客 阅读(41) 违法举报

这篇具有很好参考价值的文章主要介绍了微信小程序--音乐播放器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信小程序页面结构和组件练习--音乐播放器

说明：

  • 这个项目旨在练习组件以及页面的设计。页面和交互的实现可能有多种方式，这里只为了对组件和项目的结构进行熟悉了解。后续会有更加完善的项目。
  • 由于涉及到mp3外链导入音乐，预览二维码在外链失效时会出错，这里不放预览二维码了；另预览二维码存在有效时长，有兴趣的可以自己试着运行程序，在运行程序之前更换mp3外链的地址，以防出错。mp3外链获取（音乐外链在线获取_音乐外链生成网站_音乐在线听-mp3外链网 (xf1433.com)）。
  • 喜欢的可以点个赞，如果有问题或者想要完整的项目代码及素材，评论区有百度云链接。

效果图：

 微信小程序--音乐播放器     微信小程序--音乐播放器     微信小程序--音乐播放器

  • 三个页面通过轮播图的方式进行切换并实现一定的交互效果。其中，音乐推荐页没有设定交互；播放器页的进度条具有滑动可改变进度；播放列表页具有播放列表音乐的事件；底部的显示区域具有控制音频的交互。
  • 遇到的问题：布局嵌套；初始数据的访问；渲染的嵌套使用；

bug:

  • 播放器页面的播放时长和进度条的显示：页面首次加载获取不到默认曲目的音频时长。按下一首和播放列表进行播放也不显示，按暂停后再按播放就能正常显示。

代码部分：

  • 这里给出项目的代码，没给出代码却存在的文件内容为空。关于素材方面，icon和img分别是图片和图标文件夹；照片是平时拍的，图标在阿里巴巴图标库找的（iconfont-阿里巴巴矢量图标库）。

微信小程序--音乐播放器

app.json 

{

  "pages": [

    "pages/index/index"

  ],

  "window": {

    "navigationBarBackgroundColor": "#e0e0e0",

    "navigationBarTextStyle": "black",

    "navigationBarTitleText": "音乐"

  },

  "sitemapLocation": "sitemap.json"

}

 index.wxml

<view class="tap"><!--导航区域-->

  <view class="tap1" bindtap="onRecommend" data-item="0">音乐推荐</view>

  <view class="tap1" bindtap="onPlay" data-item="1">播放器</view>

  <view class="tap1" bindtap="onList" data-item="2">播放列表</view>

</view>

<view class="contain"><!--内容区域-->

  <swiper current="{{item}}">

      <swiper-item><include src="recommend.wxml" /></swiper-item>

      <swiper-item><include src="play.wxml" /></swiper-item>

      <swiper-item><include src="list.wxml" /></swiper-item>

  </swiper>

</view>

<view class="footer"><!--底部区域-->

  <view>

    <view class="footer1">

      <image src="{{playSing.musiccoverImg}}" class="footerImage"></image>

    </view>

    <view class="footer2">

      <view>{{playSing.musicsong}}</view>

      <view>{{playSing.musicsinger}}</view>

    </view>

    <view class="footer3">

      <view>

        <image src="../../icon/菜单.png" bindtap="menuTap" data-item="2"></image>

        <view>

          <image wx:if="{{!isPlayMusic}}" src="../../icon/暂停.png" bindtap="pauseTap"></image>

          <image wx:else src="../../icon/播放.png" bindtap="playTap"></image>

        </view>

        <image src="../../icon/下一曲.png" bindtap="nextTap"></image>

      </view>

    </view>

  </view>

</view>

 index.wxss

page{

  display: flex;flex-direction: column;background: rgb(146, 128, 121);height: 100%;

}

.tap{display: flex;

  background-color: rgb(82, 240, 121);height: 70rpx;

}

.tap1{flex: 1;font-size: 20px;text-align:center;border-bottom: solid 5rpx rgb(50, 9, 235);} 

.contain{flex:1;}

.contain>swiper{height:100%;background-color: rgb(42, 182, 147);}

.recom1{margin-bottom: 60rpx;height: 550rpx;}

.recom1 image{width: 100%;height: 100%;}

.recom2{display: flex;flex-wrap:wrap;margin-bottom: 20rpx;}

.recom2>view{flex: 1;text-align: center;}

.recom2 image{width: 120rpx;height: 100rpx;border: solid 4rpx rgb(120, 223, 197);border-radius: 10%;}

.recom3{display: flex;flex-wrap:wrap;flex: 1;margin-bottom: 20rpx;}

.recom3>view{text-align:center;margin: 10rpx 20rpx;}

.recom3 image{width: 210rpx;height: 140rpx;border-radius: 10%;}

.list{display: flex;flex: 1;flex-direction: column; }

.list>view{border-bottom: solid 3rpx rgb(24, 216, 223);display: flex;}

.list image{width: 100rpx;height: 100rpx;margin: 15rpx;}

.list2{flex: 1;}

.list2_1{diaplaly: flex;}

.list2_1>view:first-child{text-align: left;margin-top: 20rpx;}

.list2_1>view:last-child{flex:1;text-align: right;margin-top: 50rpx;margin-right: 20rpx;}

.play{height:100%;display: flex;flex-direction: column;justify-content: center;}

.play1{text-align: center;margin:20rpx;font-size: 40rpx;}

.play2{text-align: center;flex: 1;}

.play2 image{width: 350rpx;height:350rpx;border-radius: 50%;margin-top: 130rpx;}

.playrotate{animation: animateRotate 10s linear infinite;}

.play3{display: flex;}

.play3 slider{flex: 1;}

.play3>view:first-child{margin: 20rpx 0rpx 20rpx 20rpx;padding:0rpx;}

.play3>view:last-child{margin: 20rpx 20rpx 20rpx 0rpx;padding:0rpx;}

.footer{background-color:rgb(12, 228, 243);font-size: 18px;}

.footer>view{display: flex;}

.footerImage{width: 80rpx;height: 80rpx;margin: 15rpx;}

.footer2{display: flex;flex-direction: column;}

.footer2 view{text-align: center;margin: 5rpx;font-size: 30rpx;}

.footer3{flex: 1;}

.footer3>view{display: flex;justify-content: flex-end;padding-top: 20rpx;}

.footer3 image{width: 70rpx;height: 70rpx;margin: 0rpx 15rpx;}

@keyframes animateRotate{

  from{transform: rotate(0deg);}

  to{transform: rotate(360deg);}

}

 index.js

Page({

  data: {

    item:0,

    isactive:0,

    isPlayMusic:false,

    isrotate:false,

    isplay:true,

    listSing:[

      {id:"1",song:"八月夜桂花",singer:"还潮",coverImg:"../../img/sw1.jpg",audioSrc:"https://sharefs.ali.kugou.com/202107232134/30280d96986673559df9ab931c6bc75b/G174/M02/0D/01/7g0DAF3n4iOAcc9TAD3rmaDghjI270.mp3"},

      {id:"2",song:"晚风",singer:"陈婧霏",coverImg:"../../img/sw2.jpg",audioSrc:"https://sharefs.ali.kugou.com/202107232131/e87b792dd4206b1c082ed389d423512d/G164/M03/04/00/5A0DAF1c-AKAeVXaACsys46W7mQ528.mp3"},

      {id:"3",song:"亲密爱人",singer:"梅艳芳",coverImg:"../../img/sw3.jpg",audioSrc:"http://mp.333ttt.com/mp3music/22851062.mp3"},

      {id:"4",song:"在冬天和奶奶一起晒太阳",singer:"赵照",coverImg:"../../img/sw1.jpg",audioSrc:"https://sharefs.ali.kugou.com/202107232134/7a25da194582ddcf4cf6f856701b50e5/G189/M0A/15/18/nZQEAF5ZEk6AfipaAEPqyN-VYhI072.mp3"},

      {id:"5",song:"晚安",singer:"林宥嘉",coverImg:"../../img/sw3.jpg",audioSrc:"https://sharefs.ali.kugou.com/202107222148/67074aa123d09ee52aa715578b487694/KGTX/CLTX001/c59c04254efa6f54d7bdd675947f68ac.mp3"},

      {id:"6",song:"Sofia",singer:"Alvaro Soler",coverImg:"../../img/sw2.jpg",audioSrc:"https://sharefs.ali.kugou.com/202107231545/a70098ef00c6fdbb3722f0c0a32a12e7/G201/M01/0A/04/aYcBAF5ABeiAL5WOADNmeboY3wg848.mp3"},

      {id:"7",song:"Wild",singer:"Monogem",coverImg:"../../img/sw1.jpg",audioSrc:"https://sharefs.ali.kugou.com/202107231546/2a37951e34e374ad35749dcefa39f28e/G119/M04/04/17/tw0DAFpOGEOAKYizADS68iNCyy4692.mp3"},

      {id:"8",song:"童话镇",singer:"暗杠",coverImg:"../../img/sw3.jpg",audioSrc:"https://sharefs.ali.kugou.com/202107231550/275d29499eba4450e5751bba98ad2563/G062/M03/14/11/fg0DAFd1IvSAJlbkAD0PMS2Gwek596.mp3"}

    ],

    playSing:{

      musicsong:'',

      musicsinger:'',

      musiccoverImg:'',

      currenttime:'00:00',

      totaltime:'00:00',

      percent:0

    }

    

  },

  //可直接访问并赋值属性

  audio:null,

  indexlist:0,

  musicnum:0,

  //顶部栏事件

  onRecommend:function(e){

    this.setData({item:e.target.dataset.item,isactive:0})

  },

  onPlay:function(e){this.setData({item:e.target.dataset.item,isactive:1})},

  onList:function(e){this.setData({item:e.target.dataset.item,isactive:2})},

  //recommend页面事件

  

  //play页面事件

  onMusic:function(index){

    var music = this.data.listSing[index];

    this.audio.src=music.audioSrc;

    this.setData({

      'playSing.musicsong':music.song,

      'playSing.musicsinger':music.singer,

      'playSing.musiccoverImg':music.coverImg,

      'playSing.totaltime':'00:00',

      'playSing.currenttime':'00:00'       

    })

  },

  onSlider:function(e){

    this.audio.seek(e.detail.value/100*this.audio.duration)

    this.setData({

      'playSing.currenttime':formatTime(e.detail.value/100*this.audio.duration),

      'playSing.totaltime':formatTime(this.audio.duration),

      'playSing.percent':this.audio.currentTime/this.audio.duration*100

    })

    function formatTime(time){

      var minute=Math.floor(time/60)%60;

      var second=Math.floor(time)%60;

      return (minute<10? '0'+minute : minute) + ':' + (second<10? '0'+second:second)

    }

  },

  //底部播放栏事件

  menuTap:function(e){

    this.setData({item:e.target.dataset.item})

  },

  pauseTap:function(){

    this.onAuxiliary()

    this.audio.play()

  },

  playTap:function(){

    this.audio.pause()

    this.setData({isPlayMusic:false,isrotate:false})

  },

  nextTap:function(){

    if(this.musicnum <= (this.indexlist+1)){

      this.indexlist=0;

      this.onMusic(this.indexlist)  //音乐信息

      this.onAuxiliary()             //音乐辅助事件

      this.audio.play()             //播放音乐

      return

    }

    this.onMusic(++this.indexlist)

    this.onAuxiliary()

    this.audio.play()

  },

  //list页面事件

  musicList:function(e){

    //这里对应底部的播放器的变化，同时右边当前播放显示，且音乐播放。

    this.onMusic((e.currentTarget.dataset.listorder)-1)

    this.indexlist=(e.currentTarget.dataset.listorder)-1;

    this.onAuxiliary()

    this.audio.play()

  },

  //辅助函数

  onAuxiliary:function(){   //此辅助函数为添加播放的事件监听

    this.setData({isPlayMusic:true,isrotate:true})

    this.audio.onError(()=>{wx.showToast({    /*在播放的界面里写错误和结束事件 */

      title: '播放地址错误'

    })})

    this.audio.onEnded(()=>{

      this.nextTap()

    })

    /*使用播放事件来时刻显示播放进度 */

    // this.audio.onPlay(()=>{ })

    this.audio.onTimeUpdate(()=>{

      this.setData({

        'playSing.totaltime':formatTime(this.audio.duration),

        'playSing.currenttime':formatTime(this.audio.currentTime),

        'playSing.percent':this.audio.currentTime/this.audio.duration*100

      })

    })

    function formatTime(time){

      var minute=Math.floor(time/60)%60;

      var second=Math.floor(time)%60;

      return (minute<10? '0'+minute : minute) + ':' + (second<10? '0'+second:second)

    }

  },

})

 recommend.wxml

<scroll-view class="recom" scroll-y="true" style="height:100%;">

  <swiper class="recom1" indicator-dots="true" autoplay circular>

    <swiper-item><image src="../../img/sw1.jpg" mode="aspectFill"></image></swiper-item>

    <swiper-item><image src="../../img/sw2.jpg" mode="aspectFill"></image></swiper-item>

    <swiper-item><image src="../../img/sw3.jpg" mode="aspectFill"></image></swiper-item>

  </swiper>

  <view class="recom2">

    <view> 

      <image src="../../img/sw1.jpg"></image>

      <view>私人FM</view>

    </view>

    <view>

      <image src="../../img/sw11.jpg"></image>

      <view>每日歌曲推荐</view>

    </view>

    <view>

      <image src="../../img/sw3.jpg"></image>

      <view>云音乐新歌榜</view>

    </view>

  </view>

  <view style="margin-left:20rpx;margin-bottom:10rpx;">热门音乐</view>

  <view class="recom3">

    <view class="recom3_1">

      <image src="../../img/sw11.jpg"></image>

      <view>紫罗兰</view>

    </view>

    <view class="recom3_1">

      <image src="../../img/sw11.jpg"></image>

      <view>五月之家</view>

    </view>

    <view class="recom3_1">

      <image src="../../img/sw11.jpg"></image>

      <view>菩提树</view>

    </view>

    <view class="recom3_1">

      <image src="../../img/sw11.jpg"></image>

      <view>紫罗兰</view>

    </view>

    <view class="recom3_1">

      <image src="../../img/sw11.jpg"></image>

      <view>五月之家</view>

    </view>

    <view class="recom3_1">

      <image src="../../img/sw11.jpg"></image>

      <view>菩提树2</view>

    </view>

  </view>

</scroll-view>文章来源地址https://www.toymoban.com/news/detail-489446.html

play.wxml

<view class="play">

   <view class="play1">

      <view>{{playSing.musicsong}}</view>

      <view>--{{playSing.musicsinger}}--</view>

   </view>

   <view class="play2">

      <image src="{{playSing.musiccoverImg}}" class="{{isrotate?'playrotate':'pauserotate'}}"></image>

   </view>

   <view class="play3">

      <view>{{playSing.currenttime}}</view>

      <slider block-size="12" value="{{playSing.percent}}" bindchange="onSlider"></slider>

      <view>{{playSing.totaltime}}</view>

   </view>

</view>

list.wxml

<scroll-view scroll-y="true" style="height:100%">

  <view class="list">

    <view wx:for="{{listSing}}" wx:key="id" wx:for-item="item1">

      <view class="list1">

        <image src="{{item1.coverImg}}" mode="aspectFill"></image>

      </view>

      <view class="list2">

        <view bindtap="musicList" class="list2_1" data-listorder="{{item1.id}}">

        <view class="list3">

          <view>{{item1.song}}</view>

          <view>{{item1.singer}}</view>

        </view>

        <view class="list3 list3-{{isplaycolor ? 'iscolor' : ''}}"><view wx:if="{{true}}">点击播放</view></view>

      </view>

      </view>

    </view>

  </view>

  <view style="text-align:center;font-size:40rpx;">待更新~</view>

</scroll-view>

到了这里，关于微信小程序--音乐播放器的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序实现音乐播放器（1）

    微信小程序实现音乐播放器（1）

    代码涉及的主要文件有： app.json app.wxss pages/music/music.json pages/music/music.wxml pages/music/music.wxss pages/music/music.js 另外，你可能需要的图片资源，在这里！ BackgroundAudioManager实现背景音乐 imzusheng / netease-music-uniapp

    2024年02月09日
    浏览(41)
  • 微信小程序音乐播放器【含源码】

    微信小程序音乐播放器【含源码】

    微信小程序音乐播放器 取源码私聊

    2024年02月06日
    浏览(35)
  • 微信小程序仿网易音乐播放器项目

    微信小程序仿网易音乐播放器项目

    主页样式 播放页样式 搜索页样式 排行榜页样式 小控件样式 网易云音乐API接口 后端接口，使用node写的，使用了网易云音乐API： 封装的api文件 主页面功能点 banner，滑动菜单栏采用微信的API（ swiper 与 scroll-view ）进行开发 滑动到底部重新获取后续的歌曲，使用onReachBottom周期

    2024年02月06日
    浏览(39)

  • 微信小程序实现一个音乐播放器的功能

    1.页面包含一个音乐列表，点击列表中的音乐可以播放对应的音乐。 2.播放中的音乐在列表中有标识，并且可以暂停或继续播放。 3.显示当前音乐的播放进度和总时长，并可以拖动进度条调整播放进度。 4.点击切换按钮可以切换到下一首音乐。 5.点击循环按钮可以切换音乐的

    2024年01月22日
    浏览(48)
  • 基于微信小程序的音乐播放器设计

    基于微信小程序的音乐播放器设计

    目 录 1绪论 1 1.1选题背景及意义 1 1.2发展现状 1 1.2.1什么是微信小程序 1 1.2.2小程序市场的现状 4 1.3研究主要内容 4 2系统技术 5 2.1 Java语言 5 2.2 SSM框架 6 2.3 Vue.js框架 7 2.4 Eclipse开发工具 8 2.5数据库 9 2.6系统开发环境概述 10 3系统分析 12 3.1 功能需求（用例图分析） 12 3.1.1 网络音

    2024年02月11日
    浏览(33)
  • java微信小程序音乐播放器分享系统

    java微信小程序音乐播放器分享系统

    随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,音乐播放器小程序被用户普遍使用,为方便用户能够可以随时进行音乐播放器小程序的数据信息管理,特开发了基于音乐

    2024年02月11日
    浏览(38)
  • uniapp 仿网易云音乐播放器 微信小程序

    uniapp 仿网易云音乐播放器 微信小程序

    uniapp 仿照网易云播放器功能

    2024年02月12日
    浏览(113)
  • ssm基于微信小程序的音乐播放器(程序+开题)

    ssm基于微信小程序的音乐播放器(程序+开题)

    本系统（程序 + 源码）带文档 lw 万字以上 文末可获取一份本项目的 java 源码和数据库参考。 研究背景： 随着移动互联网的普及和智能手机的广泛应用，人们对于音乐的需求也越来越高。传统的音乐播放器存在着功能单一、操作繁琐等问题，无法满足用户的需求。因此，开发

    2024年02月02日
    浏览(47)
  • 微信小程序——实现音乐播放器（上下切换歌曲、进度条拉动、暂停与继续播放）

    微信小程序——实现音乐播放器（上下切换歌曲、进度条拉动、暂停与继续播放）

    小伙伴们你们有没有想过自己搞一个播放器，播上自己喜欢的歌单，那是多么的惬意啊~ 之前，小编遇到一个项目，语音导览的播放器。其实跟播放歌单一个道理。 但是一看微信开发文档里面的音频API又是那么多，我们该如何选择呢？在这里小编选择了使用wx.createAudioContext

    2024年02月02日
    浏览(60)
  • 案例115:基于微信小程序的音乐播放器的设计与实现

    案例115:基于微信小程序的音乐播放器的设计与实现

    文末获取源码 开发语言：Java 框架：SSM JDK版本：JDK1.8 数据库：mysql 5.7 开发软件：eclipse/myeclipse/idea Maven包：Maven3.5.4 小程序框架：uniapp 小程序开发软件：HBuilder X 小程序运行软件：微信开发者 目录 目录 前言 系统展示 系统首页界面的设计实现 用户注册功能的设计实现 用户登

    2024年02月02日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包