1. Toy模板网首页
  2. > Toy博客

《微信小程序》音乐播放器项目

9月前 作者：Mr顺 分类：Toy博客 阅读(50) 违法举报

这篇具有很好参考价值的文章主要介绍了《微信小程序》音乐播放器项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

音乐播放器项目

需求：在装有node.js的机器上使用微信开发者工具开发一个音乐播放项目

写这个项目的时候电脑前后蓝屏了5次，制作不易，希望大佬们给个双击，顺子在这感谢啦！

展示：
《微信小程序》音乐播放器项目

pages–>index–>index.js
《微信小程序》音乐播放器项目

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

  /**
   * 页面的初始数据
   */
  data: {
    item: 0,
    tab: 0,
    // 播放列表数据
    playlist: [{
      id: 1,
      title: '我的天空',
      singer: '南征北战',
      src: 'http://localhost:3000/1.mp3',
      coverImgUrl: '/images/cover.jpg'
    }, {
      id: 2,
      title: 'See You Again',
      singer: 'Khalifa_Charlie Puth',
      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'
    }],
    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()
  }
})

《微信小程序》音乐播放器项目

{
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "音乐",
  "navigationBarTextStyle": "black"
}

《微信小程序》音乐播放器项目

<!-- 标签页标题 -->
<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/banner.jpg" />
          </swiper-item>
          <swiper-item>
            <image src="/images/banner2.jpg" />
          </swiper-item>
          <swiper-item>
            <image src="/images/banner3.jpg" />
          </swiper-item>
        </swiper>
        <!-- 功能按钮 -->
        <view class="content-info-portal">
          <view>
            <image src="/images/04.png" />
            <text>私人FM</text>
          </view>
          <view>
            <image src="/images/05.png" />
            <text>每日歌曲推荐</text>
          </view>
          <view>
            <image src="/images/06.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="/images/cover1.png" />
              <view>汇电音之经典领电音之奥妙
            </view>
            </view>
            <view class="list-item">
              <image src="/images/cover2.png" />
              <view>[周杰伦]每首歌曲，都是顶级文案
              </view>
            </view>
            <view class="list-item">
              <image src="/images/cover3.png" />
              <view>伤感情歌|不眠夜里的孤单心事
              </view>
            </view>
            <view class="list-item">
              <image src="/images/cover4.png" />
              <view>[经典]听这些怀旧的歌，体会经典的旋律
              </view>
            </view>
            <view class="list-item">
              <image src="/images/cover5.png" />
              <view>[粤语经典]漫漫人生路、每到离别总是伤
              </view>
            </view>
            <view class="list-item">
              <image src="/images/cover6.png" />
              <view>[流行华语]向我们即将逝去的青春致敬</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}}" />
  <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" />
    <!-- 播放或暂停 -->
    <image wx:if="{{state=='paused'}}" src="/images/02.png" bindtap="play" />
    <image wx:else src="/images/02stop.png" bindtap="pause" />
    <!-- 下一曲 -->
    <image src="/images/03.png" bindtap="next" />
  </view>
</view>

《微信小程序》音乐播放器项目

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;
}

《微信小程序》音乐播放器项目

<!-- 内容滚动区域 -->
<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/banner.jpg" />
    </swiper-item>
    <swiper-item>
      <image src="/images/banner.jpg" />
    </swiper-item>
    <swiper-item>
      <image src="/images/banner.jpg" />
    </swiper-item>
  </swiper>
  <!-- 功能按钮 -->
  <view class="content-info-portal">
    <view>
      <image src="/images/04.png" />
      <text>私人FM</text>
    </view>
    <view>
      <image src="/images/05.png" />
      <text>每日歌曲推荐</text>
    </view>
    <view>
      <image src="/images/06.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="/images/cover.jpg" />
        <view>汇电音之经典领电音之奥妙
        </view>
      </view>
      <view class="list-item">
        <image src="/images/cover.jpg" />
        <view>周杰伦]每首歌曲，都是顶级文案</view>
      </view>
      <view class="list-item">
        <image src="/images/cover.jpg" />
        <view>伤感情歌|不眠夜里的孤单心事</view>
      </view>
      <view class="list-item">
        <image src="/images/cover.jpg" />
        <view>经典]听这些怀旧的歌，体会经典的旋律</view>
      </view>
      <view class="list-item">
        <image src="/images/cover.jpg" />
        <view>[粤语经典]漫漫人生路、每到离别总是伤</view>
      </view>
      <view class="list-item">
        <image src="/images/cover.jpg" />
        <view>[流行华语]向我们即将逝去的青春致敬</view>
      </view>
    </view>
  </view>
</scroll-view>

《微信小程序》音乐播放器项目

<!-- 播放器 -->
<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="{{play.coverImgUrl}}" style="animation-play-state:{{state}}" />
  </view>
  <!-- 显示播放进度和时间 -->
  <view class="content-play-progress">
    <text>{{play.currentTime}}</text>
    <view>
      <slider bindchange="sliderChange" activeColor="#d33a31" block-size="12" backgroundColor="#dadada" value="{{play.percent}}" />
    </view>
    <text>{{play.duration}}</text>
  </view>
</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>

图片呢？

《微信小程序》音乐播放器项目

01.png

《微信小程序》音乐播放器项目
02.png

《微信小程序》音乐播放器项目
02stop.png

《微信小程序》音乐播放器项目

03.png

《微信小程序》音乐播放器项目
04.png

《微信小程序》音乐播放器项目
05.png

《微信小程序》音乐播放器项目
06.png

《微信小程序》音乐播放器项目
banner.jpg

《微信小程序》音乐播放器项目
banner2.jpg

《微信小程序》音乐播放器项目
banner3.jpg

《微信小程序》音乐播放器项目
cover.jpg

《微信小程序》音乐播放器项目
cover1.png

《微信小程序》音乐播放器项目
cover2.png

《微信小程序》音乐播放器项目
cover3.png

《微信小程序》音乐播放器项目
cover4.png

《微信小程序》音乐播放器项目
node.js模拟服务器很简单，我在这就不多赘述了。

如果有任何疑问可以评论区留言，由于私信的比较多，如果我超过1天没有回复，可以加我的QQ：1525104866 ，说明来意，大家共同交流进步！
代码自取吧：
链接：https://pan.baidu.com/s/1vv20gigzAJ_qH1hmrq9-3w?pwd=j08n
提取码：j08n
–来自百度网盘超级会员V2的分享文章来源地址https://www.toymoban.com/news/detail-503164.html

到了这里，关于《微信小程序》音乐播放器项目的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序——【云音乐播放器】

    微信小程序——【云音乐播放器】

    目录 第一章 开发准备 一、项目结构 二、新建微信小程序项目 第二章 标签页切换 一、常用组件介绍 二、编写页面结构和样式 第三章 音乐推荐 一、组件介绍 二、编写音乐推荐页面结构和样式 第四章 播放器 一、任务分析 二、组件介绍 三、实现播放器功能 四、编写播放器

    2024年02月09日
    浏览(44)
  • 微信小程序实现音乐播放器（1）

    微信小程序实现音乐播放器（1）

    代码涉及的主要文件有： app.json app.wxss pages/music/music.json pages/music/music.wxml pages/music/music.wxss pages/music/music.js 另外，你可能需要的图片资源，在这里！ BackgroundAudioManager实现背景音乐 imzusheng / netease-music-uniapp

    2024年02月09日
    浏览(43)
  • 微信小程序音乐播放器【含源码】

    微信小程序音乐播放器【含源码】

    微信小程序音乐播放器 取源码私聊

    2024年02月06日
    浏览(37)
  • java微信小程序音乐播放器分享系统

    java微信小程序音乐播放器分享系统

    随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,音乐播放器小程序被用户普遍使用,为方便用户能够可以随时进行音乐播放器小程序的数据信息管理,特开发了基于音乐

    2024年02月11日
    浏览(41)
  • 基于微信小程序的音乐播放器设计

    基于微信小程序的音乐播放器设计

    目 录 1绪论 1 1.1选题背景及意义 1 1.2发展现状 1 1.2.1什么是微信小程序 1 1.2.2小程序市场的现状 4 1.3研究主要内容 4 2系统技术 5 2.1 Java语言 5 2.2 SSM框架 6 2.3 Vue.js框架 7 2.4 Eclipse开发工具 8 2.5数据库 9 2.6系统开发环境概述 10 3系统分析 12 3.1 功能需求（用例图分析） 12 3.1.1 网络音

    2024年02月11日
    浏览(37)

  • 微信小程序实现一个音乐播放器的功能

    1.页面包含一个音乐列表，点击列表中的音乐可以播放对应的音乐。 2.播放中的音乐在列表中有标识，并且可以暂停或继续播放。 3.显示当前音乐的播放进度和总时长，并可以拖动进度条调整播放进度。 4.点击切换按钮可以切换到下一首音乐。 5.点击循环按钮可以切换音乐的

    2024年01月22日
    浏览(50)
  • uniapp 仿网易云音乐播放器 微信小程序

    uniapp 仿网易云音乐播放器 微信小程序

    uniapp 仿照网易云播放器功能

    2024年02月12日
    浏览(119)
  • ssm基于微信小程序的音乐播放器(程序+开题)

    ssm基于微信小程序的音乐播放器(程序+开题)

    本系统（程序 + 源码）带文档 lw 万字以上 文末可获取一份本项目的 java 源码和数据库参考。 研究背景： 随着移动互联网的普及和智能手机的广泛应用，人们对于音乐的需求也越来越高。传统的音乐播放器存在着功能单一、操作繁琐等问题，无法满足用户的需求。因此，开发

    2024年02月02日
    浏览(52)
  • 微信小程序——实现音乐播放器（上下切换歌曲、进度条拉动、暂停与继续播放）

    微信小程序——实现音乐播放器（上下切换歌曲、进度条拉动、暂停与继续播放）

    小伙伴们你们有没有想过自己搞一个播放器，播上自己喜欢的歌单，那是多么的惬意啊~ 之前，小编遇到一个项目，语音导览的播放器。其实跟播放歌单一个道理。 但是一看微信开发文档里面的音频API又是那么多，我们该如何选择呢？在这里小编选择了使用wx.createAudioContext

    2024年02月02日
    浏览(62)
  • 案例115:基于微信小程序的音乐播放器的设计与实现

    案例115:基于微信小程序的音乐播放器的设计与实现

    文末获取源码 开发语言：Java 框架：SSM JDK版本：JDK1.8 数据库：mysql 5.7 开发软件：eclipse/myeclipse/idea Maven包：Maven3.5.4 小程序框架：uniapp 小程序开发软件：HBuilder X 小程序运行软件：微信开发者 目录 目录 前言 系统展示 系统首页界面的设计实现 用户注册功能的设计实现 用户登

    2024年02月02日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包