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

移动开发 2023-04-08 16:11:57 阅读次数: 0

一、项目效果展示

  • 音乐推荐页面展示
    在这里插入图片描述

  • 播放器展示
    在这里插入图片描述

  • 播放列表展示
    在这里插入图片描述

二、项目结构

  • 音乐小程序项目页面结构：
1.tab导航栏
2.content内容区
3.player音乐播放器控件

在这里插入图片描述

  • 开发者工具创建空白项目：

  • 新建项目 —— 设置项目名称和路径 —— 选择你注册的AppID —— 不使用云服务 —— 选择JavaScript基础模板 —— 点击确定创建项目

  • 修改app.json

{
    
    
  "pages":[
    "pages/index1/index1",
    "pages/index1/info",
    "pages/index1/play",
    "pages/index1/playlist",
    "pages/index/index",
    "pages/header/header",
    "pages/footer/footer",
    "pages/logs/logs"
  ],
  "window":{
    
    
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "音乐",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

在这里插入图片描述

  • 在index1中编写顶部tab导航栏、中部content内容区页面和底部player音乐播放栏
  • 在info中编写音乐推荐页面
  • 在play中编写播放器页面
  • 在playlist中编写播放列表页面
    在这里插入图片描述

三、项目实现

（一）index1

  • index1.wxml代码：
<view class="tab">
    <view class="tab-item {
     
     {item==0?'active':''}}" bindtap="changeItem" data-item="0">音乐推荐</view>
    <view class="tab-item  {
     
     {item==1?'active':''}}" bindtap="changeItem" data-item="1">播放器</view>
    <view class="tab-item  {
     
     {item==2?'active':''}}" bindtap="changeItem" data-item="2">播放列表</view>
</view>
<view class="content" style="color: #ffffff;">
    <swiper current="{
     
     {item}}" bindchange="changeTab">
        <swiper-item>
            <include src="./info"></include>
        </swiper-item>
        <swiper-item>
            <include src="./play"></include>
        </swiper-item>
        <swiper-item>
            <include src="./playlist"></include>
        </swiper-item>
    </swiper>

</view>
<view class="player">
    <image src="{
     
     {play.coverImage}}"></image>
    <view class="player-info">
        <view>{
   
   {play.title}}</view>
        <view class="player-info-auth">{
   
   {play.singer}}</view>
    </view>
    <view class="player-controls">
        <image src="../images/01.png"></image>
        <image wx:if="{
     
     { state=='paused' }}" src="../images/02.png" bindtap="play"></image>
        <image wx:if="{
     
     { state=='running' }}" src="../images/02stop.png" bindtap="pause"></image>
        <image src="../images/03.png" bindtap="next"></image>
    </view>
</view>
  • swiper组件编写滑动页面结构：
<swiper>
  <swiper-item style="background:#ccc">0</swiper-item>
  <swiper-item style="background:#ddd">1</swiper-item>
  <swiper-item style="background:#eee">2</swiper-item>
</swiper>

在这里插入图片描述

三、编写页面结构和样式

  • 在pages/index/index.wxml编写页面和tab导航栏
<!-- 标签页标题 -->
<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"></view>
<!-- 底部播放器 -->
<view class="player"></view>

在这里插入图片描述

  • 在pages/index/index.wxss编写页面样式和tab导航栏样式
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;
}
.tab-item.active {
    
    
  color: #c25b5b;
  border-bottom-color: #c25b5b;
}

在这里插入图片描述

  • 添加页面info.wxml、playlist.wxml、play.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>
      <include src="info.wxml"></include>
    </swiper-item>
    <swiper-item>
      <include src="play.wxml"></include>
    </swiper-item>
    <swiper-item>
      <include src="playlist.wxml"></include>
    </swiper-item>
  </swiper>
</view>
<!-- 底部播放器 -->
<view class="player"></view>

在这里插入图片描述

  • 滚动事件
    // tab切换
    changeTab: function(e) {
    
    
      this.setData({
    
    
        tab: e.detail.current
      })
    },

在这里插入图片描述

  • 通过滚动事件切换页面
    在这里插入图片描述

第三章 音乐推荐

一、任务分析

  • 音乐推荐页面结构图
    在这里插入图片描述

二、组件介绍

  • scroll-view组件的属性及说明
可选值 说明 默认
scroll-x Boolean 允许横向滚动，默认为false
scroll-y Boolean 允许纵向滚动，默认为false
scroll-top Number / String 设置竖向滚动条的位置
scroll-left Number / String 设置横向滚动条的位置
bindscrolltoupper EventHandle 滚动到顶部/左边时触发的事件
bindscrolltolower EventHandle 滚动到底部/右边时触发的事件
scroll-with-animation Boolean 滚动到顶部/左边时触发的事件
scroll-into-view String 设置哪个方向可滚动，则在哪个方向滚动到该元素。值应为某子元素id（id不能以数字开头）
bindscroll EventHandle 滚动时触发的事件

三、编写音乐推荐页面结构和样式

  • 在info.wxml里实现内容区域滚动和轮播图
<!-- 内容滚动区域 -->
<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>
</scroll-view>

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

在这里插入图片描述

  • 实现展示
    在这里插入图片描述
  • 在info.html里实现功能按钮
<!-- 功能按钮 -->
  <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>

/* 功能按钮 */

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

在这里插入图片描述

  • 实现展示
    在这里插入图片描述
  • flex布局实现热门音乐的页面布局
  <!-- 热门音乐 -->
  <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>

在这里插入图片描述

/* 热门音乐 */

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

}

在这里插入图片描述

  • 实现展示
    在这里插入图片描述
  • 在index.wxml里编写底部播放器
<!-- 底部播放器 -->
<view class="player">
  <image class="player-cover" src="/images/cover.jpg" />
  <view class="player-info">
    <view class="player-info-title">钢琴协奏曲</view>
    <view class="player-info-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>
</view>

在这里插入图片描述

  • 底部播放器样式
/* 底部播放器 */

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

在这里插入图片描述

  • 测试效果
    在这里插入图片描述

第四章 播放器

一、任务分析

  • 播放器标签页结构图：
    在这里插入图片描述
  • 播放器具体功能分析
1.音乐信息：显示当前播放曲目的标题和艺术家
2.专辑封面：当音乐播放时，专辑封面会顺时针旋转
3.播放进度：显示播放进度，调节音乐进度

二、组件介绍

  • audioCtx对象声明的方式
var audioCtx = wx.createInnerAudioContext();
  • 音频API接口的属性及说明
可选值 名称 说明
属性
src
音频资源的地址，用于直接播放
startTime
开始播放的位置（秒），默认为0
autoplay
是否自动开始播放，默认为false
loop
是否循环播放，默认为false
volume
音量。范围0~1。默认为1
duration
音频的长度（秒）。在当前有合法的src时返回（只读）
currentTime
音频的播放位置（秒）。在当前有合法的src时返回（只读）
paused
开始播放的位置（秒），默认为0

三、实现播放器功能

  • 在index.js里定义基础播放列表和音乐状态数据
/**
   * 页面的初始数据
   */
  data: {
    
    
    item: 0,
    tab: 0,
    // 播放列表数据
    playlist: [{
    
    
      id: 1,
      title: '玫瑰花的葬礼',
      singer: '许嵩',
      src: 'https://www.ytmp3.cn/down/78393.mp3',
      coverImgUrl: '/images/cover.jpg'
    }, {
    
    
      id: 2,
      title: '幻听',
      singer: '许嵩',
      src: 'https://www.ytmp3.cn/down/59696.mp3',
      coverImgUrl: '/images/cover.jpg'
    }, {
    
    
      id: 3,
      title: '清明雨上',
      singer: '许嵩',
      src: 'https://www.ytmp3.cn/down/36119.mp3',
      coverImgUrl: '/images/cover.jpg'
    }, {
    
    
      id: 4,
      title: '灰色头像',
      singer: '许嵩',
      src: 'https://www.ytmp3.cn/down/59697.mp3',
      coverImgUrl: '/images/cover.jpg'
    }],
    state: 'paused',
    playIndex: 0,
    play: {
    
    
      currentTime: '00:00',
      duration: '00:00',
      percent: 0,
      title: '',
      singer: '',
      coverImgUrl: '/images/cover.jpg',
    }
  },

在这里插入图片描述

  • 在index.js编辑音乐播放逻辑代码
   // 实现播放器播放功能
    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
      })
    },

在这里插入图片描述

  • 修改底部播放器的结构代码
<!-- 底部播放器 -->
<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>

在这里插入图片描述

  • 底部播放器样式代码
/* 底部播放器 */

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

在这里插入图片描述

  • 底部播放器播放功能
    在这里插入图片描述
  • 在indexjs里编写底部播放器暂停/播放按钮控制歌曲以及播放器切换下一曲歌曲功能
// 播放按钮
  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()
    }
  },

在这里插入图片描述

  • 测试底部播放功能
    在这里插入图片描述

四、编写播放器页面

  • 在play.wxml编写播放器页面代码
<!-- 播放器 -->
<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>

在这里插入图片描述

  • 查看页面
    在这里插入图片描述
  • 在index.wxss编写播放器样式
/* 播放器 */

.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;
}
/* 显示专辑页面样式 */

.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.wxml编写播放列表结构
<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>

在这里插入图片描述

  • 查看结果
    在这里插入图片描述
  • 在index.wxss编写播放列表样式
/* 播放列表 */

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

在这里插入图片描述

  • 查看结果
    在这里插入图片描述
  • 在index.js里实现播放列表的切换功能
// 播放列表换曲功能
    change: function(e) {
    
    
      this.setMusic(e.currentTarget.dataset.index)
      this.play()
  }

在这里插入图片描述

三、测试播放列表切换功能

  • 播放列表测试
    在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_56238454/article/details/128291703
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022