微信小程序音乐播放器
趁周末做一个简单的微信小程序音乐播放器，源码已留。
- 播放列表首页wxml
<swiper class="swiper" indicator-dots='{{swipterSet.indicator_dots}}' indicator-color='{{swipterSet.indicator_color}}' indicator-active-color='{{swipterSet.indicator_active_color}}' autoplay='{{swipterSet.autoplay}}' current='{{swipterSet.current}}' interval='{{swipterSet.interval}}' duration='{{swipterSet.duration}}' circular='{{swipterSet.circular}}'
vertical='{{swipterSet.vertical}}' previous-margin='{{swipterSet.previous_margin}}'
next-margin='{{swipterSet.next_margin}}' display-multiple-items="{{swipterSet.display_multiple_items}}" skip-hidden-item-layout="{{swipterSet.skip_hidden_item_layout}}" easing-function="{{swipterSet.easing_function}}"bindchange="bindchange" bindtransition="bindtransition" bindanimationfinish="bindanimationfinish" ><block wx:for="{{music_img}}" wx:key="key"><swiper-item><image src="{{item.src}}" style="width:{{swipterSet.width}}rpx;height:{{swipterSet.height}}rpx;"></image></swiper-item></block>
</swiper>
<view class="searPar"><view class="search"><input type="text" value="" placeholder-class="pcss" placeholder="输入歌手名，音乐名搜索" bindinput="inputSear"></input></view>
</view>
<scroll-view style="height:{{v_height}}px;" scroll-y='true'><block wx:for="{{music_list}}" wx:key="key"><view class="lists"><image src="{{item.img}}"></image><text>{{item.name}}</text><text>{{item.title}}-{{item.name}}</text><text>{{item.time}}</text><image src="../../image/play.jpg" bindtap="playClick" data-index="{{index}}"></image></view></block>
</scroll-view>
2，播放列表js
let music = require('../../utils/data.js');
const app = getApp();
Page({data: {// 轮播图swipterSet:{// 是否显示面板指示点indicator_dots:true,//指示点颜色indicator_color: '#FFFFFF',// 当前选中的指示点颜色indicator_active_color:'#FFDD00',//是否自动切换autoplay:true,// 当前所在滑块的indexcurrent:1,// 自动切换时间间隔 毫秒interval:1000,// 滑动动画时长duration:700,// 是否采用衔接滑动circular:true,// 滑动方向是否为纵向vertical:false,// "0px" 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值previous_margin :'30rpx',// "0px" 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 next_margin:'30rpx',// 同时显示的滑块数量display_multiple_items:1,// 跳过未显示的滑块布局 设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息skip_hidden_item_layout:false,// 指定 swiper 切换缓动动画类型// default 默认缓动函数 // linear 线性动画 // easeInCubic 缓入动画 // easeOutCubic 缓出动画 // easeInOutCubic 缓入缓出动画 // change事件 source 返回值// 从 1.4.0 开始，change事件增加 source字段，表示导致变更的原因，可能值如下：//autoplay 自动播放导致swiper变化；//touch 用户划动引起swiper变化；//其它原因将用空字符串表示。easing_function:'easeInOutCubic',// 图片宽高width:680,height:350},music_img:[],music_list:[],v_height:0,},// current 改变时会触发 change 事件，event.detail = { current, source }bindchange: function (eventhandle) {// { current: 2, currentItemId: "", source: "autoplay" }// console.log(eventhandle.detail);},// swiper - item 的位置发生改变时会触发 transition 事件 event.detail = { dx: dx, dy: dy }bindtransition: function (eventhandle) {// { dx: 295.90679883381927, dy: 0 }// console.log(eventhandle.detail);},// 动画结束时会触发 animationfinish 事件，event.detail 同上bindanimationfinish: function (eventhandle) {// { current: 2, currentItemId: "", source: "autoplay" }// console.log(eventhandle.detail);},onLoad: function () {this.setData({music_img: music.swipter_url(),music_list: music.music_data()})},onReady:function(){var that=this;this.getOtherHeight(['.swiper','.searPar'],function(res){that.setData({v_height:wx.getSystemInfoSync().windowHeight - res[0].height - res[1].height,}) });},getOtherHeight: function (keyArray, succes) {var query = wx.createSelectorQuery();for(let i = 0; i<keyArray.length; i++)query.select(keyArray[i]).boundingClientRect();query.exec((res) => {succes(res);})},inputSear:function(e){let name = e.detail.value;let arr= music.music_data();for(let i=0;i<arr.length;i++){if (arr[i].title.indexOf(name)==-1 && arr[i].name.indexOf(name)==-1){arr.splice(i, 1);i-=1;}}this.setData({music_list :arr})},playClick:function(e){let index = e.currentTarget.dataset.index;let obj=this.data.music_list[index];var jsonstr = JSON.stringify(obj); //将json对象转换为json字符串wx.navigateTo({url: '../playMusic/playMusic?content=' + jsonstr,})}
})
3,播放列表wxss
swipter{background: rebeccapurple;
}
image{border-radius: 24rpx;
}
.searPar{background-color: greenyellow;height: 88rpx;
}
.search{position: relative;border: 1rpx solid #f2f2f2;padding:5rpx 15rpx;font-size: 28rpx;color: #333333;border-radius: 10rpx;width: 686rpx;left: 50%;top: 50%;transform: translate(-50%,-50%)
}
.search>input{height: 60rpx;
}
.pcss{font-size: 28rpx;
}
.lists{height: 200rpx;background-color: gray;border-bottom: 2rpx solid #ffffff;position: relative;
}
.lists>image,.lists>text{position: absolute;left: 0;top: 0;
}
.lists>text{color: #ffffff;left: 30%;font-size: 28rpx;top: 65%;
}
.lists>image{height: 150rpx;width: 150rpx;top: 50%;transform: translateY(-50%);
}
.lists>image:nth-child(1){left: 3%;
}
.lists>text:nth-child(2){font-size: 48rpx;top: 8%;
}
.lists>text:nth-child(3){font-size: 32rpx;top: 40%;
}
.lists>image:nth-child(5){height: 80rpx;width: 80rpx;left: 85%;
}
4,播放页面wxml
<view class="allPage" ><image style="width:{{allWidth}}px;height:{{allHeight}}px;" src="{{music_data.poster}}"><scroll-view id="word" style="height:{{wHeight}}px;" scroll-y='true'><block wx:for="{{music_data.word}}" wx:key="key"><text>{{item}}</text></block></scroll-view><audio id="myMusic" src="{{music_data.src}}" loop="{{music_data.loop}}" controls="{{music_data.controls}}" poster="{{music_data.poster}}" name="{{music_data.name}}" author="{{music_data.author}}"></audio></image>
</view>5,播放页面js
Page({/*** 页面的初始数据*/data: {music_data:{// 要播放音频的资源地址src:"",// 是否循环播放loop:false,// 是否显示默认控件controls:false,// 默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效poster:'',// 默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效name :"",// 默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效 author:"",word:""},allHeight:0,allWidth:0,wHeight:0},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var obj= JSON.parse(options.content); //由json字符串转换为json对象this.setData({music_data: {src: obj.music,loop: false,controls: true,poster: obj.img,name: obj.name,author: obj.title,word: obj.music_word}})console.log(obj);var audioCtx= wx.createInnerAudioContext('myMusic');audioCtx.play();},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {var that = this;this.getOtherHeight(['#myMusic'], function (res) {that.setData({allHeight: wx.getSystemInfoSync().windowHeight,allWidth: wx.getSystemInfoSync().windowWidth,wHeight: wx.getSystemInfoSync().windowHeight -res[0].height,})console.log(wx.getSystemInfoSync().windowHeight - res[0].height);});},getOtherHeight: function (keyArray, succes) {var query = wx.createSelectorQuery();for (let i = 0; i < keyArray.length; i++)query.select(keyArray[i]).boundingClientRect();query.exec((res) => {succes(res);})},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},// audioPlay: function () {// this.audioCtx.play()// },// audioPause: function () {// this.audioCtx.pause()// },// audio14: function () {// this.audioCtx.seek(14)// },// audioStart: function () {// this.audioCtx.seek(0)// }// binderror eventhandle 否 当发生错误时触发 error 事件，detail = { errMsg: MediaError.code } 1.0.0// bindplay eventhandle 否 当开始 / 继续播放时触发play事件 1.0.0// bindpause eventhandle 否 当暂停播放时触发 pause 事件 1.0.0// bindtimeupdate eventhandle 否 当播放进度改变时触发 timeupdate 事件，detail = { currentTime, duration } 1.0.0// bindended eventhandle 否 当播放到末尾时触发 ended 事件 1.0.0
})
6，播放页wxss
.allPage{position: relative;
}
#myMusic{position: absolute;left: 50%;transform: translateX(-50%);bottom: 10rpx;
}
#word{position: absolute;left: 0;top: 0;color: white;
}
text{display: block;text-align: center;margin: 10rpx 0;
}
7，数据
function swipter_url(){
return [
{
src: ‘https://p3fx.kgimg.com/stdmusic/20200320/20200320123904521386.jpg’
},
{
src: ‘https://p3fx.kgimg.com/stdmusic/20200417/20200417115814250186.jpg’
},
{
src: ‘https://p3fx.kgimg.com/stdmusic/20191110/20191110174405582448.jpg’
}
];
}
function music_data(){
return [
{
title:‘点歌的人’,
name:‘海来阿木’,
time:‘3: 17’,
music: ‘https://webfs.yun.kugou.com/202004251815/24aea63991e1b92b8a0cea171fb8f032/G207/M08/0D/17/b4cBAF50SeaAGPCVADAvrBQvKrw897.mp3’,
music_word:[‘暂无歌词’],
img:‘https://p3fx.kgimg.com/stdmusic/20200320/20200320123904521386.jpg’
},
{
title: ‘胡66’,
name: ‘后来遇见他’,
time: ‘4: 09’,
music: ‘https://webfs.yun.kugou.com/202004251817/09a6fd3d99f0e5323c0bf4987dd8cd10/G209/M04/15/1B/sZQEAF5yIAGABKyMADz-g6dtNsQ387.mp3’,
music_word: [‘暂无歌词’],
img: ‘https://p3fx.kgimg.com/stdmusic/20200312/20200312194032367333.jpg’
},
{
title: ‘哈利Halleeee’,
name: ‘星星失眠’,
time: ‘4: 12’,
music: ‘https://webfs.yun.kugou.com/202004251819/8ca047448a8957cbab460e45bbbc8395/G211/M0A/12/05/s5QEAF6f9XiAUx-kAD2LRvlAlJY553.mp3’,
music_word: [‘暂无歌词’],
img: ‘https://p3fx.kgimg.com/stdmusic/20200422/20200422112211623513.jpg’
},
{
title: ‘傅如乔’,
name: ‘微微’,
time: ‘4: 37’,
music: ‘https://webfs.yun.kugou.com/202004251819/7c5a8d4c749f2ca5c011da6edf470733/G200/M0A/14/15/aIcBAF54ZTuASZlZAEOqn_GhLhs992.mp3’,
music_word: [‘暂无歌词’],
img: ‘https://p3fx.kgimg.com/stdmusic/20200417/20200417115814250186.jpg’
},
{
title: ‘皮卡丘多多’,
name: ‘惊雷’,
time: ‘3: 39’,
music: ‘https://webfs.yun.kugou.com/202004251821/160be8b1881c2dc2db58074f7ca233f2/G193/M0B/13/19/oZQEAF6NobqAQvG3ADWHB-eBPk4697.mp3’,
music_word: [‘暂无歌词’],
img: ‘https://p3fx.kgimg.com/stdmusic/20200408/20200408174122360975.jpg’
},
{
title: ‘Ava Max’,
name: ‘Salt’,
time: ‘3: 02’,
music: ‘https://webfs.yun.kugou.com/202004251823/b54e7a988bf44a7a630d35cddcfbaa17/part/0/960931/G095/M04/1C/09/_4YBAFuyAQCAcS5IACxzw8IlOUk721.mp3’,
music_word: [‘暂无歌词’],
img: ‘https://p3fx.kgimg.com/stdmusic/20191211/20191211153103312934.png’
},
{
title: ‘梦然’,
name: ‘少年’,
time: ‘3: 56’,
music: ‘https://webfs.yun.kugou.com/202004251824/c387577405b013ab9e178fdace352a8a/G170/M07/16/11/SocBAF3H3aqAUYOEADmpdloW3bU827.mp3’,
music_word: [‘少年 - 梦然’, ‘词：梦然’, ‘曲：梦然’, ‘编曲：张亮’, ‘制作人：张亮’, ‘徐阁’, ‘和声编写：海青’, ‘梦然’, ‘和声演唱：海青/梦然’, ‘混音工程师：赵靖’, ‘母带工程师：赵靖’, ‘监制：梦然’, ‘换种生活’, ‘让自己变得快’, ‘放弃执着’, ‘天气就会变得不错’, ‘每次走过’, ‘都是一次收获’, ‘还等什么 做对的选择’, ‘过去的’, ‘就让它过去吧’, ‘别管那是一个玩笑还是谎话’, ‘路在脚下’, ‘其实并不复杂’, ‘只要记得你是你呀’, ‘Wu oh oh’, ‘Wu oh oh’, ‘我还是从前那个少年’, ‘没有一丝丝改变’, ‘时间只不过是考验’, ‘种在心中信念丝毫未减’, ‘眼前这个少年’, ‘还是最初那张脸’, ‘面前再多艰险不退却’, ‘Say never never give up’, ‘Like a fighter’, ‘Wu oh oh’, ‘换种生活’, ‘让自己变得快乐’, ‘放弃执着’, ‘天气就会变得不错’, ‘每次走过’, ‘都是一次收获’, ‘还等什么 做对的选择’, ‘过去的’, ‘就让它过去吧’, ‘别管那是一个玩笑还是谎话’, ‘路在脚下’, ‘其实并不复杂’, ‘只要记得你是你呀’, ‘Miya miya miya miya miya’, ‘Call me’, ‘Miya miya miya miya miya’, ‘我还是从前那个少年’, ‘没有一丝丝改变’, ‘时间只不过是考验’, ‘种在心中信念丝毫未减’, ‘眼前这个少年’, ‘还是最初那张脸’, ‘面前再多艰险不退却’, ‘Say never never give up’, ‘Like a fighter’, ‘追逐生命里光临身边的每道光’, ‘让世界因为你的存在变的闪亮’, ‘其实你我他并没有什么不同’, ‘只要你愿为希望画出一道想象’, ‘成长的路上必然经历很多风雨’, ‘相信自己终有属于你的盛举’, ‘别因为磨难 停住你的脚步’, ‘坚持住 就会拥有属于你的蓝图’, ‘Wu oh oh’, ‘我还是从前那个少年’, ‘没有一丝丝改变’, ‘时间只不过是考验种’, ‘在心中信念丝毫未减’, ‘眼前这个少年’, ‘还是最初那张脸’, ‘面前再多艰险不退却’, ‘Say never never give up’, ‘Like a fighter’, ‘我还是从前那个少年miya’, ‘我还是从前那个少年miya’, ‘我还是眼前这个少年miya’,‘我还是从前那个少年miya’],
img: ‘https://p3fx.kgimg.com/stdmusic/20191110/20191110174405582448.jpg’
}
];
}
module.exports={
swipter_url: swipter_url,
music_data: music_data
}
8，效果图
微信小程序音乐播放器相关推荐
- （附源码）springboot+基于微信小程序音乐播放器的设计与实现 毕业设计271156
Springboot音乐播放小程序的设计与实现 摘 要 本文设计了一种基于微信小程序的音乐播放器,系统为人们提供了方便快捷.即用即搜的音乐搜索播放服务,包括音乐资讯.音乐库推荐.交流论坛.注册登录.最 ...
- springboot+基于微信小程序音乐播放器的设计与实现 毕业设计-附源码271156
Springboot音乐播放小程序的设计与实现 摘 要 本文设计了一种基于微信小程序的音乐播放器,系统为人们提供了方便快捷.即用即搜的音乐搜索播放服务,包括音乐资讯.音乐库推荐.交流论坛.注册登录.最 ...
- 基于微信小程序音乐播放器
随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,音乐播放器小程序被用户普遍使用,为方便用户能够可以随时 ...
- 微信小程序——音乐播放器
音乐播放器 前言 主页 三个标签页 推荐页 播放器页 播放列表页 逻辑 前言 使用swiper组件完成三个标签页的切换,并且实现轮播图.scroll-view组件完成滚动视图,使用微信小程序提供的音乐 ...
- 微信小程序-音乐播放器
前言 本文主要通过微信小程序的媒体API来实现一个简单的音乐播放器,主要实现的功能有音乐的切换.单曲循环.播放进度条的拖拽.播放与暂停和自定义音乐列表弹窗功能. 效果图 主要目录文件 |--image ...
- 01. 微信小程序音乐播放器
项目简介 最近在学微信小程序,所以打算做一个音乐播放器的微信小程序. 项目需求(原型图) 这个是我做的原型图,比较简陋(有些界面直接用了网易云音乐小程序的截图,因为是仿着网易云音乐来做的) 首页 播放 ...
- java基于微信小程序音乐播放器分享系统 uniapp 小程序
音乐播放器小程序的设计主要是对系统所要实现的功能进行详细考虑,确定所要实现的功能后进行界面的设计,在这中间还要考虑如何可以更好的将功能及页面进行很好的结合,方便用户可以很容易明了的找到自己所需要的信息 ...
- 计算机实战项目、毕业设计、课程设计之含论文+辩论PPT+源码等]微信小程序音乐播放器小程序+后台管理系统
音乐播放器平台+后台管理系统|前后分离VUE>该项目含有源码.论文等资料.配套开发软件.软件安装教程.项目发布教程等 本系统包含微信小程序前台和Java做的后台管理系统,该后台采用前后台前后分离 ...
- java微信小程序音乐播放器分享系统
随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,音乐播放器小程序被用户普遍使用,为方便用户能够可以随时 ...
最新文章
- 销售流程管理-leangoo
- select()函数以及FD_ZERO、FD_SET、FD_CLR、FD_ISSET(转)
- Mysql迁移到Oracle方法
- php实现的mongodb操作类
- 从表现现象查找电脑问题的根源
- Jenkins构建Spring+Nodejs项目
- html 如何改变图片形状,图形变换的三种方式是什么？
- Vue+Vue-router+Vuex项目实战
- kotlin 复制对象属性_Kotlin 怎么学 ？遇到过哪些坑？
- linux6 安装oracle11g
- redis 系列16 持久化 RDB
- 中值滤波原理及c语言的实现,关于中值滤波算法，以及C语言实现（转）
- matlab2019b的gui界面在哪_MATLAB（3）——GUI界面设计入门
- roblox虚拟世界怎么做服务器,roblox虚拟世界
- python filter函数_python 内置函数filter
- dom影像图形成数字地形图_数字正射影像图DOM
- mysql横竖表查询
- 时间与日期处理模块 题目解题报告
- uva 10808 - Rational Resistors
- Java集合（Collection）-小记02