微信小程序使用我们的本地服务器编写我们的音乐播放器

第一步的话就是要有一个我们的本地服务器：同时的话我们还要安装我们的nodejs
我们的小程序服务端和提取码：
链接：https://pan.baidu.com/s/1KWWwNLcyMGkuw6Vk0qG_kQ
提取码：wumm
复制这段内容后打开百度网盘手机App，操作更方便哦

然后的话就是我们的页面代码的编写了：
页面效果的展示：

我们的tab页面列表的切换的话可以看我们的上一篇博客：
好的接下来的话就是我们的文件列表的展示：

接下来就是上我们的代码了：

<!-- 在我们的这个位置的话就是编写我们的页面结构 -->
<view class="tab"><viewbindtap="changeItem"data-item="0"class="tab-item {{tab==0?'active':''}}">音乐推荐</view><viewbindtap="changeItem"data-item="1"class="tab-item {{tab==1?'active':''}}">播放器</view><viewbindtap="changeItem"data-item="2"class="tab-item {{tab==2?'active':''}}">播放列表</view>
</view>
<!-- 在我们的这个位置的话就是编写我们的内容区域 -->
<view class="content"><swiper current="{{item}}" bindchange="changTab"><swiper-item><include src="info.wxml"></include></swiper-item><swiper-item><include src="play.wxml"></include></swiper-item><swiper-item><include src="playlist.wxml"></include></swiper-item></swiper>
</view>
<!-- 底部播放器 -->
<view class="player"><image class="player-cover" src="https://i0.hdslb.com/bfs/album/5035bc2d21fd5fac67363f3ba712cb5dd38f7ea1.jpg" /><view class="player-info"><view class="player-info-title">{{play.title}}</view><view class="player-info-singer">{{play.singer}}</view></view><view class="player-controls"><!-- 切换到播放列表 --><imagesrc="https://i0.hdslb.com/bfs/album/0cf036888c71bf1466955453b1be3716446a7adf.png"bindtap="changePage"data-page="2"/><!-- 播放或暂停 --><imagewx:if="{{state=='paused'}}"src="https://i0.hdslb.com/bfs/album/da6b0d1de2d8ed5f31ad63511927dd018db1b47d.png"bindtap="play"/><imagewx:elsesrc="https://i0.hdslb.com/bfs/album/7aea165a65411ee5fe942def6eb569e04ec73fc1.png"bindtap="pause"/><!-- 下一曲 --><image src="https://i0.hdslb.com/bfs/album/0e601197dc067f7d9043b148b7f2c5a29c560eb3.png" bindtap="next" /></view>
</view>

然后的话就是我们的详细的代码：

<!-- 在我们的这个位置的话就是编写我们的页面结构 -->
<view class="tab"><viewbindtap="changeItem"data-item="0"class="tab-item {{tab==0?'active':''}}">音乐推荐</view><viewbindtap="changeItem"data-item="1"class="tab-item {{tab==1?'active':''}}">播放器</view><viewbindtap="changeItem"data-item="2"class="tab-item {{tab==2?'active':''}}">播放列表</view>
</view>
<!-- 在我们的这个位置的话就是编写我们的内容区域 -->
<view class="content"><swiper current="{{item}}" bindchange="changTab"><swiper-item><include src="info.wxml"></include></swiper-item><swiper-item><include src="play.wxml"></include></swiper-item><swiper-item><include src="playlist.wxml"></include></swiper-item></swiper>
</view>
<!-- 底部播放器 -->
<view class="player"><image class="player-cover" src="https://i0.hdslb.com/bfs/album/5035bc2d21fd5fac67363f3ba712cb5dd38f7ea1.jpg" /><view class="player-info"><view class="player-info-title">{{play.title}}</view><view class="player-info-singer">{{play.singer}}</view></view><view class="player-controls"><!-- 切换到播放列表 --><imagesrc="https://i0.hdslb.com/bfs/album/0cf036888c71bf1466955453b1be3716446a7adf.png"bindtap="changePage"data-page="2"/><!-- 播放或暂停 --><imagewx:if="{{state=='paused'}}"src="https://i0.hdslb.com/bfs/album/da6b0d1de2d8ed5f31ad63511927dd018db1b47d.png"bindtap="play"/><imagewx:elsesrc="https://i0.hdslb.com/bfs/album/7aea165a65411ee5fe942def6eb569e04ec73fc1.png"bindtap="pause"/><!-- 下一曲 --><image src="https://i0.hdslb.com/bfs/album/0e601197dc067f7d9043b148b7f2c5a29c560eb3.png" bindtap="next" /></view>
</view>

然后的话就是我们的css页面的的代码：

详细的代码：

page{display: flex;flex-direction: column;background-color: #000;color: #ccc;height: 100%;
}
.content{flex: 1;
}
.tab{display: flex;
}
.tab-item{flex: 1;font-size: 10pt;text-align: center;line-height: 72rpx;border-radius: 6rpx solid #eee;
}
.player{background-color: #222;border-top: 1px solid #b8b8b8;height: 112rpx;
}
.content > swiper{height: 100%;
}
.tab-item.active{color: red;border-bottom:5rpx solid red ;
}
.content_info{height: 100%;
}
/* 如何在设置我们的scrollview的时候去掉我们的滚动条 */
::-webkit-scrollbar{width: 0;height: 0;color: transparent;
}
.content_info_slide{height: 302rpx;margin-bottom: 20px;
}
.content_info_slide image{width: 100vw;height: 100%;margin-bottom: 100%;
}
/* 设置我们功能按钮的样式*/
.content-info-portal{display: flex;margin-bottom: 15px;
}
.content-info-portal > view{flex: 1;font-size: 11pt;text-align: center;
}
.content-info-portal  image{width: 120rpx;height: 120rpx;display: block;margin: 20rpx auto;
}
.content-info-list{font-size: 11pt;margin-bottom: 20rpx;
}
.content-info-list > .list-title{margin: 20rpx 35rpx;
}
.content-info-list > .list-inner{display: flex;flex-wrap: wrap;margin: 0 20rpx;
}
.content-info-list > .list-inner > .list-item {flex: 1;
}.content-info-list > .list-inner > .list-item > image {display: block;width: 200rpx;height: 200rpx;margin: 0 auto;border-radius: 10rpx;border: 1rpx solid #555;
}.content-info-list > .list-inner > .list-item > view {width: 200rpx;margin: 10rpx auto;font-size: 10pt;
}
/* 播放器 */.content-play {display: flex;justify-content: space-around;flex-direction: column;height: 100%;text-align: center;
}.content-play-info > view {color: #888;font-size: 11pt;
}/* 底部播放器 */.player {display: flex;align-items: center;background: #222;border-top: 1px solid #252525;height: 112rpx;
}.player-cover {width: 80rpx;height: 80rpx;margin-left: 15rpx;border-radius: 8rpx;border: 1px solid #333;
}.player-info {flex: 1;font-size: 10pt;line-height: 38rpx;margin-left: 20rpx;padding-bottom: 8rpx;
}.player-info-singer {color: #888;
}.player-controls image {width: 80rpx;height: 80rpx;margin-right: 15rpx;
}
/* 显示专辑页面样式 */.content-play-cover image {animation: rotateImage 10s linear infinite;width: 400rpx;height: 400rpx;border-radius: 50%;border: 1px solid #333;
}@keyframes rotateImage {from {transform: rotate(0deg);}to {transform: rotate(360deg);}
}/* 播放进度和时间 */.content-play-progress {display: flex;align-items: center;margin: 0 35rpx;font-size: 9pt;text-align: center;
}.content-play-progress > view {flex: 1;
}
/* 播放列表 */.playlist-item {display: flex;align-items: center;border-bottom: 1rpx solid #333;height: 112rpx;
}.playlist-cover {width: 80rpx;height: 80rpx;margin-left: 15rpx;border-radius: 8rpx;border: 1px solid #333;
}.playlist-info {flex: 1;font-size: 10pt;line-height: 38rpx;margin-left: 20rpx;padding-bottom: 8rpx;
}.playlist-info-singer {color: #888;
}.playlist-controls {font-size: 10pt;margin-right: 20rpx;color: #c25b5b;
}

然后的话就是我们的js部分的代码：

详细的代码：

Page({/*** 页面的初始数据*/data: {//我们定义的item变量默认为0item:0,tab:0,playlist: [{id: 1,title: '红装',singer: '红装',src: 'http://localhost:3000/1.mp3',coverImgUrl: '/images/cover.jpg'}, {id: 2,title: '六月的雨',singer: '六月的雨',src: 'http://localhost:3000/2.mp3',coverImgUrl: '/images/cover.jpg'}, {id: 3,title: '莫问归期',singer: '莫问归期',src: 'http://localhost:3000/3.mp3',coverImgUrl: '/images/cover.jpg'}, {id: 4,title: '红装',singer: '红装',src: 'http://localhost:3000/4.mp3',coverImgUrl: '/images/cover.jpg'}, {id: 5,title: '六月的雨',singer: '六月的雨',src: 'http://localhost:3000/6.mp3',coverImgUrl: '/images/cover.jpg'}, {id: 6,title: '莫问归期',singer: '莫问归期',src: 'http://localhost:3000/5.mp3',coverImgUrl: '/images/cover.jpg'}],state: 'paused',playIndex: 0,play: {currentTime: '00:00',duration: '00:00',percent: 0,title: '',singer: '',coverImgUrl: '/images/cover.jpg',}},// item 的事件处理函数, 页面切换changeItem:function(e){this.setData({item:e.target.dataset.item})},// 获取到我们当前的标签页对应的索引值 tab切换changTab:function(e){console.log(e.detail)this.setData({tab:e.detail.current})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/audioCtx:null,onReady: function () {// 在我们的这个位置的话就是创建我们的播放音频的对象this.audioCtx = wx.createInnerAudioContext()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 nusic = this.data.playlist[index]this.audioCtx.src = nusic.srcthis.setData({playIndex:index,"play.title":nusic.title,"play.singer":nusic.singer,"play.coverImgUrl":nusic.coverImageUrl,"play.currentTime":"00:00","play.duration":"00:00","play.percent":0})//  this.audioCtx.play();},// 播放按钮play: function() {this.audioCtx.play()this.setData({state: 'running'})},// 暂停按钮pause: function() {this.audioCtx.pause()this.setData({state: 'paused'})},//上一曲prev: function () {var index = this.data.playIndex <= 0 ? this.data.playlist.length - 1 : this.data.playIndex - 1this.setMusic(index)if (this.data.state === 'running') {this.play()}},// 下一曲按钮next: function() {var index = this.data.playIndex >= this.data.playlist.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()},})

然后的话就是我们的外部引进页面的代码：

<!-- 播放器 -->
<view class="content-play"><!-- 显示音乐信息 --><view class="content-play-info"><text>{{play.title}}</text><view>—— {{play.singer}} ——</view></view><!-- 显示专辑封面 --><view class="content-play-cover"><image src="https://i0.hdslb.com/bfs/album/5035bc2d21fd5fac67363f3ba712cb5dd38f7ea1.jpg" style="animation-play-state:{{state}}" /></view><!-- 显示播放进度和时间 --><view class="content-play-progress"><text>{{play.currentTime}}</text><view><sliderbindchange="sliderChange"activeColor="#d33a31"block-size="12"backgroundColor="#dadada"value="{{play.percent}}"/></view><text>{{play.duration}}</text></view>
</view>

<scroll-view class="content_info" scroll-y="{{true}}"><swiperclass="content_info_slide"indicator-color="rgba(255, 255, 255, .3)"indicator-active-color="#fff"indicator-dots="{{true}}"circular="{{true}}"autoplay="{{true}}"><swiper-item><image mode="widthFix" src="https://i0.hdslb.com/bfs/album/894654486c7888bde9ab2229fa27452d4d203214.jpg" /></swiper-item><swiper-item><image mode="widthFix" src="https://i0.hdslb.com/bfs/album/c188969b65c334cf228fc077a30db8100030ff7e.jpg" /></swiper-item><swiper-item><image mode="widthFix" src="https://i0.hdslb.com/bfs/album/521da639b61ee058ed840d4d0a0707b10ca62601.jpg" /></swiper-item><swiper-item><image mode="widthFix" src="https://i0.hdslb.com/bfs/album/1a21ddb65d71dea818540a0c9d22ff76891511a3.jpg" /></swiper-item></swiper><!-- 在我们的这个位置的话就是设置我们的功能按钮的页面结构 --><view class="content-info-portal"><view><image src="https://i0.hdslb.com/bfs/album/9c973062ccd6096eaaff3948eb9d581e85bf2f59.png" /><text>每日推荐</text></view><view><image src="https://i0.hdslb.com/bfs/album/6fb0834ec9a25806977fdcb5f181756cd3bf9404.png" /><text>云音乐推荐</text></view><view><image src="https://i0.hdslb.com/bfs/album/4a27b30f687ad3e41c9ef2f6e63fde670d126150.png" /><text>云音乐新歌</text></view></view><!-- 在我们的这个位置的话就是设置我们的热门音乐的按钮 --><view class="content-info-list"><view class="list-title">推荐歌曲</view><view class="list-inner"><view class="list-item"><image src="https://i0.hdslb.com/bfs/album/5035bc2d21fd5fac67363f3ba712cb5dd38f7ea1.jpg" /><view>红装</view></view><view class="list-item"><image src="https://i0.hdslb.com/bfs/album/5035bc2d21fd5fac67363f3ba712cb5dd38f7ea1.jpg" /><view>六月的雨</view></view><view class="list-item"><image src="https://i0.hdslb.com/bfs/album/5035bc2d21fd5fac67363f3ba712cb5dd38f7ea1.jpg" /><view>莫问归期</view></view><view class="list-item"><image src="https://i0.hdslb.com/bfs/album/5035bc2d21fd5fac67363f3ba712cb5dd38f7ea1.jpg" /><view>日本音乐</view></view><view class="list-item"><image src="https://i0.hdslb.com/bfs/album/5035bc2d21fd5fac67363f3ba712cb5dd38f7ea1.jpg" /><view>日本音乐</view></view><view class="list-item"><image src="https://i0.hdslb.com/bfs/album/5035bc2d21fd5fac67363f3ba712cb5dd38f7ea1.jpg" /><view>日本音乐</view></view></view></view>
</scroll-view>

<scroll-view class="content-playlist" scroll-y><view class="playlist-item" wx:for="{{playlist}}" 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>

到我们的这个位置的话我们的代码就都编写完成了：

微信小程序使用我们的本地服务器编写我们的音乐播放器相关推荐

小程序登录本地服务器,微信小程序实现用户登录模块服务器搭建
我选用的是node.js来搭建服务器,没有安装的小伙伴可以参考我的node.js其他博客. 服务器安装与配置初始化项目,将会自动创建package.json配置文件. npm init -y 安装E ...
[Web] [微信小程序-云开发] 商城无服务器加后台管理
[Web] [微信小程序-云开发] 商城无服务器加后台管理说明: 目前云开发仅针对认证后的公众号使用(每年300的费用那个) wxapp-mall-clouddb 前言如何使用更多说明功能 ...
微信小程序开发（六）——服务器
目录建立一个简单的本地服务器现在可以使用VS Code,如果没有就在终端中操作微信小程序调用网易云API 服务器百度网盘提取地址: 建立一个简单的本地服务器新建一个文件夹fuwu 然后在该页面 ...
微信小程序 - 下载文件到本地、打开文档
前言需求场景描述:接口获取到服务器的文件地址,然后在小程序中下载文件到本地手机上.根据文件格式,下载类型分为下面四种情况: 下载图片到本地下载视频到本地打开文档,支持格式:doc, xls, p ...
微信小程序学习Course 8 本地缓存API
微信小程序学习Course 8 本地缓存API 本篇随笔主要介绍微信小程序本地缓存API函数,微信小程序可以在本地缓存一些关键词数据,每一条关键词对应一段字符串.微信小程序提供了以下API函数. 8. ...
php微信小程序物流进度推送,微信小程序消息推送php服务器验证实例详解
微信小程序消息推送php服务器验证实例详解设置页面("设置">>"开发设置"): 1.设置服务器域名注意http和https协议的不同. 2. ...
微信小程序下载文件至本地，并打开文档
微信小程序下载文件至本地,并打开文档 downloadfile(e){var url = e.currentTarget.dataset.url;//下载文件,生成临时地址wx.downloadFil ...
小程序源码：百变头像框制作微信小程序源码下载,免服务器和域名
这是一款头像框制作的微信小程序源码支持多种模板制作! 如一些热门的,王者头像框,国旗头像框,职业头像框等等这一款小程序是免服务器和免域名的所以也就是说这是一款纯前端的一款微信小程序源码无需设置 ...
微信小程序-注册登录功能-本地数据保存-页面数据交替
Title:微信小程序-注册登录功能-本地数据保存-页面数据交替完美-小程序登录注册功能.rar-- 访问码:yqa5 1.主页面主页面login.js代码 // pages/login/logi ...

微信小程序使用我们的本地服务器编写我们的音乐播放器

微信小程序使用我们的本地服务器编写我们的音乐播放器相关推荐

最新文章

热门文章