小程序简单版音乐播放器

最新推荐文章于 2024-09-30 10:52:34 发布
最新推荐文章于 2024-09-30 10:52:34 发布
阅读量678 收藏 4
点赞数 3
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_76607708/article/details/139732939
版权

小程序简单版音乐播放器

在这里插入图片描述

结构

先来看看页面结构

    <!-- wxml -->
    
<!-- 标签页标题 -->
<view class="tab">
  <view class="tab-item {{tab==0?'active':''}}" bindtap="changeItem" data-item="0">音乐推荐</view>
  <view class="tab-item {{tab==1?'active':''}}" bindtap="changeItem" data-item="1">播放器</view>
  <view class="tab-item {{tab==2?'active':''}}" bindtap="changeItem" data-item="2">播放列表</view>
</view>
<!-- 内容区域 -->
<view class="content">
  <swiper current="{{item}}" bindchange="changeTab">
    <swiper-item>
      <!-- 内容滚动区域 -->
      <scroll-view class="content-info" scroll-y>
        <!-- 轮播图 -->
        <swiper class="content-info-slide" indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff" indicator-dots circular autoplay>
          <swiper-item>
            <image src="/images/02.jpg" mode="aspectFill" />
          </swiper-item>
          <swiper-item>
            <image src="/images/03.jpg" mode="aspectFill" />
          </swiper-item>
          <swiper-item>
            <image src="/images/04.jpg" mode="aspectFill" />
          </swiper-item>
        </swiper>
        <!-- 功能按钮 -->
        <view class="content-info-portal">
          <view>
            <image src="/images/04.png" mode="aspectFill" catch:tap="fm" />
            <text>私人FM</text>
          </view>
          <view>
            <image src="/images/05.png" mode="aspectFill" />
            <text>每日歌曲推荐</text>
          </view>
          <view>
            <image src="/images/06.png" mode="aspectFill" />
            <text>云音乐新歌榜</text>
          </view>
        </view>
        <!-- 热门音乐 -->
        <view class="content-info-list">
          <view class="list-title">推荐歌曲</view>
          <view class="list-inner">
            <view class="list-item">
              <image src="/images/hush.png" mode="aspectFill" />
              <view>Hush</view>
            </view>
            <view class="list-item">
              <image src="/images/talk.png" mode="aspectFill" />
              <view>Talk</view>
            </view>
            <view class="list-item">
              <image src="/images/men.png" mode="aspectFill" />
              <view>Memories</view>
            </view>
            <view class="list-item">
              <image src="/images/hour.png" mode="aspectFill" />
              <view>golden hour</view>
            </view>
            <view class="list-item">
              <image src="/images/mess.png" mode="aspectFill" />
              <view>Yes I'm A Mess</view>
            </view>
            <view class="list-item">
              <image src="/images/iii.png" mode="aspectFill" />
              <view>III Do It</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </swiper-item>
    <swiper-item>
      <!-- 播放器页面 -->
      <include src="play.wxml" />
    </swiper-item>
    <swiper-item>
      <include src="playlist.wxml" />
    </swiper-item>
  </swiper>
</view>
<!-- 底部播放器 -->
<view class="player">
  <image class="player-cover" src="{{play.coverImgUrl}}" mode="aspectFill" />
  <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">
    <!-- 切换到播放列表 -->
    <image src="/images/01.png" bindtap="changePage" data-page="2" mode="aspectFill" />
    <!-- 播放或暂停 -->
    <image wx:if="{{state=='paused'}}" src="/images/02.png" bindtap="play" mode="aspectFill" />
    <image wx:else src="/images/02stop.png" bindtap="pause" mode="aspectFill" />
    <!-- 下一曲 -->
    <image src="/images/03.png" bindtap="next" mode="aspectFill" />
  </view>
</view>

其中一些代码可以使用 wx:for 循环创建，这边为了简单明了就没有循环创建

页面样式

page {
  display: flex;
  flex-direction: column;
  background: #17181a;
  color: #ccc;
  height: 100%;
}

.tab {
  display: flex;
}

.tab-item {
  flex: 1;
  font-size: 10pt;
  text-align: center;
  line-height: 72rpx;
  border-bottom: 6rpx solid #eee;
}

.content {
  flex: 1;
}

.content > swiper {
  height: 100%;
}

.player {
  background: #222;
  border-top: 1px solid #252525;
  height: 112rpx;
}

.tab-item.active {
  color: #c25b5b;
  border-bottom-color: #c25b5b;
}

.content-info {
  height: 100%;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

/* 轮播图 */

.content-info-slide {
  height: 302rpx;
  margin-bottom: 20px;
}

.content-info-slide image {
  width: 100%;
  height: 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;
}

核心代码

音乐数据

🆗，接下来创建播放列表数据

data: {
    item: 0,
    tab: 0,
    // 播放列表数据
    playlist: [{
      id: 1,
      title: 'Always Online',
      singer: '林俊杰',
      src: 'http://localhost:3000/林俊杰 - Always Online.mp3',
      coverImgUrl: '/images/jj.jpeg'
    }, {
      id: 2,
      title: '不得不爱',
      singer: '潘玮柏、弦子',
      src: 'http://localhost:3000/潘玮柏、弦子 - 不得不爱.mp3',
      coverImgUrl: '/images/pwb.jpg'
    }, {
      id: 3,
      title: '大城小爱',
      singer: '王力宏',
      src: 'http://localhost:3000/王力宏 - 大城小爱.mp3',
      coverImgUrl: '/images/wlh.jpeg'
    }, {
      id: 4,
      title: '偏爱',
      singer: '张芸京',
      src: 'http://localhost:3000/张芸京 - 偏爱.mp3',
      coverImgUrl: '/images/pa.jpeg'
    }],
    state: 'paused',
    playIndex: 0,
    play: {
      currentTime: '00:00',
      duration: '00:00',
      percent: 0,
      title: '',
      singer: '',
      coverImgUrl: '/images/cover.jpg',
    }
  },

切换功能

来实现一些页面之间简单的切换

 // 页面切换
  changeItem: function (e) {
    this.setData({
      item: e.target.dataset.item,
    })
  },
  // tab切换
  changeTab: function (e) {
    this.setData({
      tab: 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) % 60
      return (minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' + second : second)
    }
  },
  // 音乐播放
  setMusic: function (index) {
    var music = this.data.playlist[index]
    this.audioCtx.src = music.src
    this.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.playlist.length - 1 ? 0 : this.data.playIndex + 1
    this.setMusic(index)
    if (this.data.state === 'running') {
      this.play()
    }
  },

接下来就是一些必不可少的小功能了

// 滚动条调节歌曲进度
  sliderChange: function (e) {
    var second = e.detail.value * this.audioCtx.duration / 100
    this.audioCtx.seek(second)
  },

  // 播放列表换曲功能
  change: function (e) {
    this.setMusic(e.currentTarget.dataset.index)
    this.play()
  }

🆗，最后的就剩下node服务了，这边node服务只是为了挂载音乐文件这些静态资源。
这边我也会将服务端上传到本篇博客，把自己需要的MP3或MP4格式文件放入到htdocs中即可。
这边怕引起版权纠纷和维权问题就不把歌曲文件放入其中
在这里插入图片描述

node 下面代码存放在 index.js 中 请记得使用 yarn 或者 npm 安装以下的引入文件

var express = require('express')
var serveIndex = require('serve-index')
var serveStatic = require('serve-static')
var multiparty = require('multiparty')
var finalhandler = require('finalhandler')
var util = require('util')

var LOCAL_BIND_PORT = 3000
var app = express()

app.post('/upload', function (req, res) {
  var form = new multiparty.Form()
  form.encoding = 'utf-8'
  form.uploadDir = './htdocs/upfile'
  form.maxFilesSize = 4 * 1024 * 1024
  form.parse(req, function (err, fields, files) {
    if (err) {
      console.log('parse error: ' + err)
    } else {
      console.log('parse files: ' + JSON.stringify(files))
    }
    res.writeHead(200, { 'content-type': 'text/plain;charset=utf-8' })
    res.write('received upload')
    res.end()
  })
})

var serve = serveStatic('./htdocs')
app.use('/', serveIndex('./htdocs', { 'icons': true }))

app.get('/*', function (req, res) {
  serve(req, res, finalhandler(req, res))
});

// console.log(`Start static file server at ::${LOCAL_BIND_PORT}, Press ^ + C to exit`)
console.log('启动成功')

app.listen(LOCAL_BIND_PORT)
// 监听3000端口
// app.listen(3000, () => {
//   console.log('server running at http://127.0.0.1:3000')
// })

最后附上完整代码

// pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    item: 0,
    tab: 0,
    // 播放列表数据
    playlist: [{
      id: 1,
      title: 'Always Online',
      singer: '林俊杰',
      src: 'http://localhost:3000/林俊杰 - Always Online.mp3',
      coverImgUrl: '/images/jj.jpeg'
    }, {
      id: 2,
      title: '不得不爱',
      singer: '潘玮柏、弦子',
      src: 'http://localhost:3000/潘玮柏、弦子 - 不得不爱.mp3',
      coverImgUrl: '/images/pwb.jpg'
    }, {
      id: 3,
      title: '大城小爱',
      singer: '王力宏',
      src: 'http://localhost:3000/王力宏 - 大城小爱.mp3',
      coverImgUrl: '/images/wlh.jpeg'
    }, {
      id: 4,
      title: '偏爱',
      singer: '张芸京',
      src: 'http://localhost:3000/张芸京 - 偏爱.mp3',
      coverImgUrl: '/images/pa.jpeg'
    }],
    state: 'paused',
    playIndex: 0,
    play: {
      currentTime: '00:00',
      duration: '00:00',
      percent: 0,
      title: '',
      singer: '',
      coverImgUrl: '/images/cover.jpg',
    }
  },


  // 页面切换
  changeItem: function (e) {
    this.setData({
      item: e.target.dataset.item,
    })
  },
  // tab切换
  changeTab: function (e) {
    this.setData({
      tab: 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) % 60
      return (minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' + second : second)
    }
  },
  // 音乐播放
  setMusic: function (index) {
    var music = this.data.playlist[index]
    this.audioCtx.src = music.src
    this.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.playlist.length - 1 ? 0 : this.data.playIndex + 1
    this.setMusic(index)
    if (this.data.state === 'running') {
      this.play()
    }
  },

  // 滚动条调节歌曲进度
  sliderChange: function (e) {
    var second = e.detail.value * this.audioCtx.duration / 100
    this.audioCtx.seek(second)
  },

  // 播放列表换曲功能
  change: function (e) {
    this.setMusic(e.currentTarget.dataset.index)
    this.play()
  }
})

在这里插入图片描述

  • 失联

最后编辑时间 2024，06，17；10：11

失联
关注
微信小程序-微信小程序：音乐播放器
08-05
微信小程序： 音乐播放器 歌曲资源来源于 baidu音乐 截图 TODO 收藏列表 切换上一曲/下一曲
微信小程序--音乐播放器
河里的草_increase
07-24 1万+
微信小程序练习--音乐播放器 说明： 这个项目旨在练习组件以及页面的设计。页面和交互的实现可能有多种方式，这里只为了对组件和项目的结构进行熟悉了解。后续会有更加完善的项目。 由于涉及到mp3外链导入音乐，预览二维码在外链失效时会出错，这里不放预览二维码了；另预览二维码存在有效时长，有兴趣的可以自己试着运行程序，在运行程序之前更换mp3外链的地址，以防出错。mp3外链（音乐外链在线获取_音乐外链生成网站_音乐在线听-mp3外链网 (xf1433.com)）。 喜欢的可以点个赞，如果有问题或者想要完整的
微信小程序——音乐播放器
最新发布
weixin_66547608的博客
09-30 1741
了音乐小程序项目的完整开发流程，其开发步骤包括页面结构的分析、样式的设计、组件的运用等。通过本章的学习，读者能够掌握小程序的基本交互逻辑的开发，能够运用API来实现项目中的特定功能，学会解决开发过程中常见的问题。
uniapp 小程序音乐播放器
XL984507092的博客
08-29 581
【代码】uniapp 小程序音乐播放器。
微信小程序音乐播放器
01-26
wxmusic A wxapp music player 一个微信小程序的音乐播放器  现已上线微信小程序  可以搜索"ChickenMusic音乐播放器"查找本小程序 功能列表 首页：歌曲歌手搜索，轮播图，各大榜单，热门歌单 正在播放： 当前播放歌曲展示，进度展示，歌词同步滚动展示，播放模式（单曲循环，列表循环，随机播放），播放控制（上一曲，下一曲，播放/暂停） 歌手列表： 歌手详情 我的： 最近播放列表，收藏列表 使用方法 1.clone本项目到本地 2.安装微信开发者工具（有APPID需要设置服务器地址，也可以在开发工具中关闭服务器地址安全验证） 3.在微信开发者工具中打开该项目 播放器截图 1.播放页面 ; ; 2.歌手页面 ; ; 3.推荐页面和我的页面 ; ;
微信小程序实现音乐播放器
01-03
实现以下微信小程序的音乐播放器，先看下效果图 界面做的确实挺丑的，先上wxss文件 //index.wxss .button-style{ background-color: #eee; border-radius: 8rpx; margin: 20rpx; } 只是顶一个简单的按钮的圆角...
微信小程序版 简易情绪音乐播放器
01-26
【微信小程序版简易情绪音乐播放器】是一款专为微信用户设计的轻量级音乐应用，旨在通过简单易用的界面和情绪分类，提供个性化的音乐聆听体验。此小程序结合了现代人的情感需求，将音乐与情感状态相结合，帮助用户...
微信小程序开发-音乐播放器案例源码.zip
08-15
【微信小程序开发-音乐播放器案例源码】 微信小程序是一种轻量级的应用开发平台，它允许开发者在微信内创建无需安装即可使用的应用。这个“微信小程序开发-音乐播放器案例源码”是一个实用的学习资源，适合对微信小...
微信小程序-音乐播放器小程序
05-13
微信小程序-音乐播放器小程序
一款基于微信小程序的音乐播放器
08-10
一款基于微信小程序的音乐播放器
微信小程序音乐播放器demo
01-12
该小程序源码是一个音乐播放器，适用于刚刚学习微信小程序的人员。
小程序播放器
11-06
java的applet小程序---播放器
微信小程序中实现——【音乐播放器】
热门推荐
py20010218的博客
12-10 2万+
微信小程序实现音乐播放器
微信小程序 初学——【音乐播放器】
qq_56238454的博客
12-12 1万+
本人在学习微信小程序【音乐播放器】时的简单介绍
开发简单版小程序音乐播放器服务端
资源摘要信息:"小程序简单版音乐播放器" 知识点： 1. 小程序开发基础：小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。小程序也体现了“用完即走”...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值