微信小程序音乐播放器

最新推荐文章于 2024-06-17 10:12:17 发布

一只不爱写代码的程序猿

最新推荐文章于 2024-06-17 10:12:17 发布

阅读量873

点赞数 2

分类专栏：实战项目文章标签： javascript css html css3 前端

本文链接：https://blog.csdn.net/qq_32202709/article/details/105758480

版权

实战项目专栏收录该内容

2 篇文章 0 订阅

订阅专栏

趁周末做一个简单的微信小程序音乐播放器，源码已留。

播放列表首页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,
      // 当前所在滑块的index
      current: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，效果图
在这里插入图片描述