前言

使用swiper组件完成三个标签页的切换，并且实现轮播图。scroll-view组件完成滚动视图，使用微信小程序提供的音乐API播放音频。

主页

主页
index.wxml

<view class="nav"><view class="nav-item {{currentTab==0?'active':''}}" bindtap="switchTab" data-tab="0">音乐推荐</view><view class="nav-item {{currentTab==1?'active':''}}" bindtap="switchTab" data-tab="1">播放器</view><view class="nav-item {{currentTab==2?'active':''}}" bindtap="switchTab" data-tab="2">播放列表</view>
</view><!-- 标签页 -->
<view class="main">
<swiper current="{{currentTab}}" bindchange="changeTab"><swiper-item class="nav-item"><include src="recommend.wxml" /></swiper-item><swiper-item class="nav-item"><include src="play.wxml" /></swiper-item><swiper-item class="nav-item"><include src="playlist.wxml" /></swiper-item></swiper>
</view><!-- 底部播放器 -->
<view class="playing"><view class="thumb"><image src="{{play.coverImgUrl}}"></image></view><view class="info"><view class="title">{{play.title}}</view><view class="authors">{{play.singer}}</view></view><view class="controls"><image src="/images/01.png" bindtap="changePage" data-page="2" /><image wx:if="{{state=='paused'}}" src="/images/02.png" bindtap="play" /><image wx:else src="/images/02stop.png" bindtap="pause" /><image src="/images/03.png" bindtap="next" /></view>
</view>

index.wxss


@import "recommend.wxss";
@import "play.wxss";
@import "playlist.wxss";
page{background-color: #17181a;color: #ccc;font-size: 35rpx;display: flex;flex-direction: column;height: 100%;
}
/* 导航栏 */
.nav{height: 80rpx;line-height: 80rpx;display: flex;
}.nav-item{flex: 1;flex-basis:33.3%;text-align: center;
}
.active{color: orange;
}
/* 主体 */
.main{flex: 1;height: 100%;
}
.main>swiper{height: 100%;
}/* 底部 */
.playing{height: 120rpx;display: flex;
}
.thumb{width: 120rpx;}
.thumb>image{width: 110rpx;height: 110rpx;margin: 5rpx;
}
.info{flex: 1;
}
.info>view{height: 60rpx;line-height: 60rpx;
}
.controls{width: 250rpx;
}
.controls>image{width: 80rpx;height: 80rpx;margin-top: 20rpx;
}

三个标签页

播放器页

play.wxml

<view class="play"><!-- 基本信息 --><view class="music_info"><view class="name">{{play.title}}</view><view class="auto">{{play.singer}}</view></view><!-- 封面 --><view class="cover"><image src="{{play.coverImgUrl}}" style="animation-play-state:{{state}}" /></view><!-- 进度条 --><view class="progress"><!-- 显示播放进度和时间 --><text>{{play.currentTime}}</text><slider bindchange="sliderChange" activeColor="#d33a31" block-size="12" backgroundColor="#dadada"value="{{play.percent}}" /><text>{{play.duration}}</text></view></view>

play.wxss

.play {display: flex;flex-direction: column;
}/*  */
.music_info {text-align: center;margin-top: 20rpx;margin-bottom: 20rpx;
}/*  */
.cover {margin-top: 80rpx;margin-bottom: 120rpx;flex: 1;
}.cover>image {width: 400rpx;height: 400rpx;display: block;margin: 0 auto;border-radius: 50%;/* 动画旋转 */animation: rotateImage 10s linear infinite;
}@keyframes rotateImage {from {transform: rotate(0deg);}to {transform: rotate(360deg);}
}.progress{padding-bottom: 50rpx;display: flex;
}
.progress>slider{display: inline-block;/* width: 400rpx; */flex: 1;
}
.progress>text{padding: 16rpx;height: 50rpx;line-height: 50rpx;
}

播放列表页

playist.wsml

<scroll-view class="playlist" scroll-y><view class="playlist-item" wx:for="{{musics}}" wx:key="id" bindtap="change" data-index="{{index}}"><image class="playlist-cover" src="{{item.coverImgUrl}}" /><view class="playlist-info"><view class="playlist-info-title">{{item.title}}</view><view class="playlist-info-singer">{{item.singer}}</view></view><view class="playlist-controls"><text wx:if="{{index==playIndex}}">正在播放</text></view></view>
</scroll-view>

playist.wsss

.playlist-item {display: flex;align-items: left;border-bottom: 1rpx solid #333;height: 140rpx;
}.playlist-cover {width: 100rpx;height: 100rpx;margin: 12rpx;margin-left: 20rpx;border-radius: 8rpx;border: 1px solid #333;
}.playlist-info {flex: 1;font-size: 12pt;line-height: 50rpx;margin-left: 10rpx;text-align: left;padding-bottom: 8rpx;margin-top: 12rpx;
}.playlist-info-singer {color: #888;
}.playlist-controls {font-size: 12pt;margin-right: 30rpx;color: #c25b5b;
}

逻辑

index.js

Page({/*** 页面的初始数据*/data: {currrentTab: 1,musics: [{id: 1,title: '智联世界',singer: '小冰',src: '/audio/智联家园.mp3',coverImgUrl: '/images/小冰.jpg'}, {id: 2,title: '不要认输',singer: '坂井泉水',src: '/audio/不要认输.mp3',coverImgUrl: '/images/坂井泉水.jpg'}, {id: 3,title: '白桦林',singer: '朴树',src: '/audio/白桦林.mp3',coverImgUrl: '/images/朴树.jpg'}, {id: 4,title: '红豆',singer: '王菲',src: '/audio/红豆.mp3',coverImgUrl: '/images/王菲.jpg'}],state: 'paused',playIndex: 0,play: {currentTime: '00:00',duration: '00:00',percent: 0,title: '',singer: '',coverImgUrl: '/images/cover.jpg',}},// 单击导航栏拿到自定义属性switchTab: function (e) {// var tab = e.target.dataset.tab// this.setData({//   currrentTab:tab// })this.setData({currentTab: e.target.dataset.tab,})},changeTab: function (e) {// var tab = e.target.dataset.tab// this.setData({//   currrentTab:tab// })this.setData({currentTab: e.detail.current})},// 实现播放器播放功能audioCtx: null,onReady: function() {this.audioCtx = wx.createInnerAudioContext()// 默认选择第1曲this.setMusic(0)var that = this// 播放进度检测this.audioCtx.onError(function() {console.log('播放失败：' + that.audioCtx.src)})// 播放完成自动换下一曲this.audioCtx.onEnded(function() {that.next()})// 自动更新播放进度this.audioCtx.onPlay(function() {})this.audioCtx.onTimeUpdate(function() {that.setData({'play.duration': formatTime(that.audioCtx.duration),'play.currentTime': formatTime(that.audioCtx.currentTime),'play.percent': that.audioCtx.currentTime / that.audioCtx.duration * 100})})// 格式化时间function formatTime(time) {var minute = Math.floor(time / 60) % 60;var second = Math.floor(time) % 60return (minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' + second : second)}},// 音乐播放setMusic: function(index) {var music = this.data.musics[index]this.audioCtx.src = music.srcthis.setData({playIndex: index,'play.title': music.title,'play.singer': music.singer,'play.coverImgUrl': music.coverImgUrl,'play.currentTime': '00:00','play.duration': '00:00','play.percent': 0})},// 播放按钮play: function() {this.audioCtx.play()this.setData({state: 'running'})},// 暂停按钮pause: function() {this.audioCtx.pause()this.setData({state: 'paused'})},// 下一曲按钮next: function() {var index = this.data.playIndex >= this.data.musics.length - 1 ? 0 : this.data.playIndex + 1this.setMusic(index)if (this.data.state === 'running') {this.play()}},// 滚动条调节歌曲进度sliderChange: function(e) {var second = e.detail.value * this.audioCtx.duration / 100this.audioCtx.seek(second)},// 播放列表换曲功能change: function(e) {this.setMusic(e.currentTarget.dataset.index)this.play()}

微信小程序——音乐播放器相关推荐

微信小程序音乐播放器
趁周末做一个简单的微信小程序音乐播放器,源码已留. 播放列表首页wxml <swiper class="swiper" indicator-dots='{{swipterSe ...
（附源码）springboot+基于微信小程序音乐播放器的设计与实现毕业设计271156
Springboot音乐播放小程序的设计与实现摘要本文设计了一种基于微信小程序的音乐播放器,系统为人们提供了方便快捷.即用即搜的音乐搜索播放服务,包括音乐资讯.音乐库推荐.交流论坛.注册登录.最 ...
springboot+基于微信小程序音乐播放器的设计与实现毕业设计-附源码271156
Springboot音乐播放小程序的设计与实现摘要本文设计了一种基于微信小程序的音乐播放器,系统为人们提供了方便快捷.即用即搜的音乐搜索播放服务,包括音乐资讯.音乐库推荐.交流论坛.注册登录.最 ...
基于微信小程序音乐播放器
随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,音乐播放器小程序被用户普遍使用,为方便用户能够可以随时 ...
微信小程序-音乐播放器
前言本文主要通过微信小程序的媒体API来实现一个简单的音乐播放器,主要实现的功能有音乐的切换.单曲循环.播放进度条的拖拽.播放与暂停和自定义音乐列表弹窗功能. 效果图主要目录文件 |--image ...
01. 微信小程序音乐播放器
项目简介最近在学微信小程序,所以打算做一个音乐播放器的微信小程序. 项目需求(原型图) 这个是我做的原型图,比较简陋(有些界面直接用了网易云音乐小程序的截图,因为是仿着网易云音乐来做的) 首页播放 ...
java基于微信小程序音乐播放器分享系统 uniapp 小程序
音乐播放器小程序的设计主要是对系统所要实现的功能进行详细考虑,确定所要实现的功能后进行界面的设计,在这中间还要考虑如何可以更好的将功能及页面进行很好的结合,方便用户可以很容易明了的找到自己所需要的信息 ...
计算机实战项目、毕业设计、课程设计之含论文+辩论PPT+源码等]微信小程序音乐播放器小程序+后台管理系统
音乐播放器平台+后台管理系统|前后分离VUE>该项目含有源码.论文等资料.配套开发软件.软件安装教程.项目发布教程等本系统包含微信小程序前台和Java做的后台管理系统,该后台采用前后台前后分离 ...
java微信小程序音乐播放器分享系统
随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,音乐播放器小程序被用户普遍使用,为方便用户能够可以随时 ...

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

音乐播放器

前言

主页

三个标签页

推荐页

播放器页

播放列表页

逻辑

微信小程序——音乐播放器相关推荐

最新文章

热门文章