制作属于自己的一个微信小程序音乐播放器

1.首先导入大佬封装的js 方法（调用音乐api）
展示(项目下载在最下方)：
2.调用js 方法!

// pages/showplayer/index.js
const app=getApp();
const bgMusic = wx.getBackgroundAudioManager();
const { MusicManager } = require("../../NetEaseCloudMusicApi/src/MusicManager");
Page({/*** 页面的初始数据*/data: {pageHeight: null, windowHeight:null,musicInforList:[],  //歌曲信息animation: '',kphc:"",      //看破红尘playIsNo:true,showMask:true,  //蒙版showCouponListHide:true, //是否显示音乐列表musicListInformation:[],//音乐列表selectMusicIndex:0,   //选择的歌曲下标playericon:"../../resource/md-square-outline.png"},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {let that=this;this.setData({pageHeight: wx.getSystemInfoSync().windowHeight ,windowHeight:wx.getSystemInfoSync().windowWidth ,}) async function test() {let musicList = [];let musicSearchHelper = MusicManager.getMusicSearchHelper({ keyword: "热门", limit: 20 });musicList.push(await musicSearchHelper.getSearchResult())console.log(musicList)that.setData({musicInforList:musicList[0][0]})that.getMusicUrl(musicList[0][0].id,function(result){console.log(result);})// for (let i = 0; i < musicList.length; i++) {//   for (let j = 0; j < 20; j++) {//     id: musicList[i][j].id//   }// }}test();},// 获取歌曲urlgetMusicUrl :function(musicId, callback) {async function test() {let musicUrlHelper = MusicManager.getMusicUrlHelper(musicId);let url = await musicUrlHelper.getUrlResult();// console.log(`${url}`);callback(`${url}`)}test();
},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {this.getRandom();},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},/*** 获得随机整数*/getRandom:function(){let showMingYan=["你记得回来的路，却为何忘了人间的距离。","恰恰用心时，恰恰无心用，无心恰恰用，常用恰恰无。","我们永远走不到彼此的那段去，因此我们都活在自己的极致。","我只是你的过客，却在你的世界流连忘返。","年轮一圈圈密集，能回忆的故事却少之又少。","如果我们注定不是一路人，怎么样尝试接近都是徒劳。","爱情，这场没有硝烟的战争，我们都输给了彼此。","爱别离，怨憎会，撒手西归，全无是类。不过是满眼空花，一片虚幻。","人到情多情转薄，而今真个不多情。","拯救不了世界也没关系，能给身边的人温暖和快乐已经很足够了。","人永远不知道哪次不经意的跟你说了再见之后就真的再也不见。",]var num=Math.random();num=num * 11;num = Math.ceil(num);                //上取整，完成随机生成1——10的整数this.setData({kphc: showMingYan[num]})},//点击播放或者暂停stopAndStartMusicTap:function(){let that=this;if (that.data.playIsNo==true){bgMusic.pause();this.setData({playericon: "../../resource/md-square.png"})}else{bgMusic.play();this.setData({playericon: "../../resource/md-square-outline.png"})}this.setData({playIsNo: !that.data.playIsNo})},//点击列表showMusicListTap:function(){this.setData({showMask: false,  showCouponListHide: false})},//点击蒙版maskTap:function(){this.setData({showMask: true,showCouponListHide: true})},})

3.json文件

{"usingComponents": {"i-icon": "../../dist/icon/index","i-toast": "../../dist/toast/index"},"navigationBarTitleText": "音乐播放"
}

4.wxml

<!--pages/showplayer/index.wxml--><view class="applicationcontext-page"style="height:{{pageHeight}}px"><view class="showplery-page"><image class="showplery-image-page" src="{{musicInforList.picUrl}}"aanimation="{{animation}}" mode="scaleToFill"></image></view><view class="bottom-up-page"><view class="icon-page-y"><i-icon type="like" color="black" size="25"/></view><view class="icon-page-y"><i-icon type="keyboard" color="black" size="25"/></view>  <view class="yuan-page"style="margin-left:20%;"><i-icon type="switch" color="black" size="20"/></view></view><view class="bottom-dwon-page"><view class="icon-page-y-b"><i-icon type="share" color="black" size="25"/></view><view class="yuan-page-b"bindtap="lastOneTap"><image class="icon-imagesty" src="../../resource/ios-arrow-dropleft.png"></image></view><view class="yuan-page-b"><image class="icon-imagesty" src="{{playericon}}"bindtap="stopAndStartMusicTap"data-bol></image></view><view class="yuan-page-b"bindtap="nextOneTap"><image class="icon-imagesty" src="../../resource/ios-arrow-dropright.png"></image></view> <view class="icon-page-y-b"bindtap="showMusicListTap"><i-icon type="createtask" color="black" size="25"/></view></view><view class="show-textinfor-musicinfor">{{musicInforList.name}} - {{musicInforList.artistsName}}</view>
</view><view class="show-textinfor"style="top:60px">{{parse.showText(kphc)}}
</view><!--蒙版-->
<view class="mask-page" hidden="{{showMask}}"bindtap="maskTap">
</view><view class="musicList-page"hidden="{{showCouponListHide}}"><view class="musicList-page-head"><view class="musicList-page-body-list-left-infor">音乐列表（{{musicListInformation.length}}）</view><view class="musicList-page-body-list-icon"style="padding-right:3%"><i-icon type="trash_fill" size="20"/></view></view><view class="musicList-page-body"><scroll-view scroll-y><view class="musicList-page-body-list"wx:for="{{musicListInformation}}" wx:for-item='musicItem' wx:for-index='musicIndex' wx:key='{{musicIndex}}'><view class="musicList-page-body-list-left-infor"bindtap="musicMusicTap"data-index="{{musicIndex}}">                <view class="musicList-page-body-list-name">{{musicItem.name}}</view><view class="musicList-page-body-list-artistsname">-{{musicItem.artistsName}}</view></view><view class="musicList-page-body-list-icon"><i-icon type="close" size="17"/></view></view></scroll-view></view>
</view><wxs module='parse'>module.exports={showText:function(res){if(res!=null && res!=''){return res;}else{return "天上天下，唯我独尊，自观自在，守本真心。"; }}}
</wxs>

5.css 样式

/* pages/showplayer/index.wxss */
.applicationcontext-page{width: 100%;display: flex;flex-flow: column;background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1574497461493&di=7bb0bee6e3c47fe1f90f7a2f28418791&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F06%2F06%2Fc6c6423a3661cc6e8ffcf47e52af4230.jpg");background-repeat: no-repeat no-repeat;
}.showplery-page{display: flex;align-items: center;justify-content: center;width: 100%;height: 85%;
}@keyframes iconRotate{0% {transform: rotate(0deg);}50% {transform: rotate(180deg);}100% {transform: rotate(360deg);}
}.showplery-image-page{width: 500rpx;height: 500rpx;border-radius: 50% 50%;animation: iconRotate 20s linear infinite;}.bottom-up-page{display: flex;align-items: center;flex-flow: nowrap;width: 100%;height: 7.5%;background-color: #A15718;border-bottom: 1rpx solid #BD782D;
}.bottom-dwon-page{display: flex;align-items: center;border-left-width: nowrap;width: 100%;height: 7.5%;background-color: #A15718;
}.yuan-page{width:50rpx;height: 50rpx;border-radius: 50% 50%;border: 1rpx solid black;display: flex;justify-content: center;align-items: center;margin-left: 11%;
}.icon-page-y{margin-left:20%;
}.icon-page-y-b{margin-left: 11%;
}.icon-imagesty{width: 100%;height: 100%;
}.yuan-page-b{width:60rpx;height: 60rpx;border-radius: 50% 50%;display: flex;justify-content: center;align-items: center;margin-left: 10%;
}@keyframes wordsLoop {0% {transform: translateX(200px);-webkit-transform: translateX(200px);}100% {transform: translateX(-100%);-webkit-transform: translateX(-100%);}
}@-webkit-keyframes wordsLoop {0% {transform: translateX(200px);-webkit-transform: translateX(200px);}100% {transform: translateX(-100%);-webkit-transform: translateX(-100%);}
}.show-textinfor{position: absolute;animation:20s wordsLoop linear infinite normal;font-size: 27rpx;color: white;font-weight: bold;
}.show-textinfor-musicinfor{position: absolute;bottom: 350rpx;font-size: 33rpx;font-weight: bold;width: 100%;display: flex;justify-content: center;align-items: center;color: white;
}.mask-page{width:100%;height: 100%;background:black;z-index: 2;opacity:0.7;position: fixed; bottom: 0rpx;
}.musicList-page{width: 100%;height: 700rpx;background-color:#A15718; z-index: 3;position: fixed; bottom: 0rpx;border-radius: 30rpx 30rpx 0 0;
}.musicList-page-head{width: 100%;height: 80rpx;display: flex;align-items: center;font-size: 25rpx;font-weight: bold;color: white;padding-left: 20rpx;border-bottom: 1rpx solid #BD782D;flex-flow: nowrap;
}.musicList-page-body{width: 100%;height: 620rpx;display: flex;
}.musicList-page-body-list{width: 100%;height: 80rpx;display: flex;align-items: center;color: white;flex-flow: nowrap;
}.musicList-page-body-list-name{margin-left: 20rpx;font-weight: bold;font-size: 27rpx;
}.musicList-page-body-list-artistsname{font-weight: bold;font-size: 23rpx;color: #ccc;
}.musicList-page-body-list-icon{width:15%;display: flex;justify-content: center;align-items: center;
}.musicList-page-body-list-left-infor{width:85%;display: flex;flex-flow: nowrap;align-items: center;
}

点击下载项目地址
技术交流可联系博主QQ：930210782

制作属于自己的一个微信小程序音乐播放器相关推荐

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

制作属于自己的一个微信小程序音乐播放器

制作属于自己的一个微信小程序音乐播放器相关推荐

最新文章

热门文章