微信小程序使用我们的本地服务器编写我们的音乐播放器

最新推荐文章于 2024-05-22 15:35:29 发布

_沧浪之水_

最新推荐文章于 2024-05-22 15:35:29 发布

阅读量2k

点赞数 2

文章标签：小程序 node.js html5 es6 css3

本文链接：https://blog.csdn.net/qq_45973003/article/details/118297321

版权

第一步的话就是要有一个我们的本地服务器：同时的话我们还要安装我们的nodejs
我们的小程序服务端和提取码：
链接：https://pan.baidu.com/s/1KWWwNLcyMGkuw6Vk0qG_kQ
提取码：wumm
复制这段内容后打开百度网盘手机App，操作更方便哦

然后的话就是我们的页面代码的编写了：
页面效果的展示：
在这里插入图片描述

我们的tab页面列表的切换的话可以看我们的上一篇博客：
好的接下来的话就是我们的文件列表的展示：

接下来就是上我们的代码了：

<!-- 在我们的这个位置的话就是编写我们的页面结构 -->
<view class="tab">
  <view
    bindtap="changeItem"
    data-item="0"
    class="tab-item {{tab==0?'active':''}}"
  >音乐推荐
  </view>
  <view
    bindtap="changeItem"
    data-item="1"
    class="tab-item {{tab==1?'active':''}}"
  >播放器
  </view>
  <view
    bindtap="changeItem"
    data-item="2"
    class="tab-item {{tab==2?'active':''}}"
  >播放列表
  </view>
</view>
<!-- 在我们的这个位置的话就是编写我们的内容区域 -->
<view class="content">
  <swiper current="{{item}}" bindchange="changTab">
    <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">
  <image class="player-cover" src="https://i0.hdslb.com/bfs/album/5035bc2d21fd5fac67363f3ba712cb5dd38f7ea1.jpg" />
  <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="https://i0.hdslb.com/bfs/album/0cf036888c71bf1466955453b1be3716446a7adf.png"
      bindtap="changePage"
      data-page="2"
    />

    <!-- 播放或暂停 -->
    <image
      wx:if="{{state=='paused'}}"
      src="https://i0.hdslb.com/bfs/album/da6b0d1de2d8ed5f31ad63511927dd018db1b47d.png"
      bindtap="play"
    />
    <image
      wx:else
      src="https://i0.hdslb.com/bfs/album/7aea165a65411ee5fe942def6eb569e04ec73fc1.png"
      bindtap="pause"
    />
    <!-- 下一曲 -->
    <image src="https://i0.hdslb.com/bfs/album/0e601197dc067f7d9043b148b7f2c5a29c560eb3.png" bindtap="next" />
  </view>
</view>

然后的话就是我们的详细的代码：

<!-- 在我们的这个位置的话就是编写我们的页面结构 -->
<view class="tab">
  <view
    bindtap="changeItem"
    data-item="0"
    class="tab-item {{tab==0?'active':''}}"
  >音乐推荐
  </view>
  <view
    bindtap="changeItem"
    data-item="1"
    class="tab-item {{tab==1?'active':''}}"
  >播放器
  </view>
  <view
    bindtap="changeItem"
    data-item="2"
    class="tab-item {{tab==2?'active':''}}"
  >播放列表
  </view>
</view>
<!-- 在我们的这个位置的话就是编写我们的内容区域 -->
<view class="content">
  <swiper current="{{item}}" bindchange="changTab">
    <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">
  <image class="player-cover" src="https://i0.hdslb.com/bfs/album/5035bc2d21fd5fac67363f3ba712cb5dd38f7ea1.jpg" />
  <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="https://i0.hdslb.com/bfs/album/0cf036888c71bf1466955453b1be3716446a7adf.png"
      bindtap="changePage"
      data-page="2"
    />

    <!-- 播放或暂停 -->
    <image
      wx:if="{{state=='paused'}}"
      src="https://i0.hdslb.com/bfs/album/da6b0d1de2d8ed5f31ad63511927dd018db1b47d.png"
      bindtap="play"
    />
    <image
      wx:else
      src="https://i0.hdslb.com/bfs/album/7aea165a65411ee5fe942def6eb569e04ec73fc1.png"
      bindtap="pause"
    />
    <!-- 下一曲 -->
    <image src="https://i0.hdslb.com/bfs/album/0e601197dc067f7d9043b148b7f2c5a29c560eb3.png" bindtap="next" />
  </view>
</view>

然后的话就是我们的css页面的的代码：

在这里插入图片描述
详细的代码：

page{
   display: flex;
   flex-direction: column;
   background-color: #000;
   color: #ccc;
   height: 100%;
}
.content{
  flex: 1;
}
.tab{
  display: flex;
}
.tab-item{
  flex: 1;
  font-size: 10pt;
  text-align: center;
  line-height: 72rpx;
  border-radius: 6rpx solid #eee;
}
.player{
  background-color: #222;
  border-top: 1px solid #b8b8b8;
  height: 112rpx;
}
.content > swiper{
  height: 100%;
}
.tab-item.active{
  color: red;
  border-bottom:5rpx solid red ;
}
.content_info{
   height: 100%;
}
/* 如何在设置我们的scrollview的时候去掉我们的滚动条 */
::-webkit-scrollbar{
   width: 0;
   height: 0;
   color: transparent;
}
.content_info_slide{
  height: 302rpx;
  margin-bottom: 20px;
}
.content_info_slide image{
  width: 100vw;
  height: 100%;
  margin-bottom: 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;
}

然后的话就是我们的js部分的代码：
在这里插入图片描述
详细的代码：

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    //我们定义的item变量默认为0
    item:0,
    tab:0,
    playlist: [{
      id: 1,
      title: '红装',
      singer: '红装',
      src: 'http://localhost:3000/1.mp3',
      coverImgUrl: '/images/cover.jpg'
    }, {
      id: 2,
      title: '六月的雨',
      singer: '六月的雨',
      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'
    }, {
      id: 5,
      title: '六月的雨',
      singer: '六月的雨',
      src: 'http://localhost:3000/6.mp3',
      coverImgUrl: '/images/cover.jpg'
    }, {
      id: 6,
      title: '莫问归期',
      singer: '莫问归期',
      src: 'http://localhost:3000/5.mp3',
      coverImgUrl: '/images/cover.jpg'
    }],
    state: 'paused',
    playIndex: 0,
    play: {
      currentTime: '00:00',
      duration: '00:00',
      percent: 0,
      title: '',
      singer: '',
      coverImgUrl: '/images/cover.jpg',
    }
  },
  
  // item 的事件处理函数, 页面切换
  changeItem:function(e){
     this.setData({
      item:e.target.dataset.item
     })
  },
  // 获取到我们当前的标签页对应的索引值 tab切换
  changTab:function(e){
    console.log(e.detail)
    this.setData({
      tab:e.detail.current
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
     
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
   audioCtx:null,
  onReady: function () {
    // 在我们的这个位置的话就是创建我们的播放音频的对象
    this.audioCtx = wx.createInnerAudioContext()
    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 nusic = this.data.playlist[index]
     this.audioCtx.src = nusic.src
     this.setData({
        playIndex:index,
        "play.title":nusic.title,
        "play.singer":nusic.singer,
        "play.coverImgUrl":nusic.coverImageUrl,
        "play.currentTime":"00:00",
        "play.duration":"00:00",
        "play.percent":0

     })
    //  this.audioCtx.play();
  },
  // 播放按钮
  play: function() {
    this.audioCtx.play()
    this.setData({
      state: 'running'
    })
  },

  // 暂停按钮
  pause: function() {
    this.audioCtx.pause()
    this.setData({
      state: 'paused'
    })
  },
  //上一曲
  prev: function () {
    var index = this.data.playIndex <= 0 ? this.data.playlist.length - 1 : this.data.playIndex - 1
    this.setMusic(index)
    if (this.data.state === 'running') {
      this.play()
    }
  },

  // 下一曲按钮
  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()
  },
  
})

然后的话就是我们的外部引进页面的代码：
在这里插入图片描述

<!-- 播放器 -->
<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="https://i0.hdslb.com/bfs/album/5035bc2d21fd5fac67363f3ba712cb5dd38f7ea1.jpg" 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_info" scroll-y="{{true}}">
  <swiper
    class="content_info_slide"
    indicator-color="rgba(255, 255, 255, .3)"
    indicator-active-color="#fff"
    indicator-dots="{{true}}"
    circular="{{true}}"
    autoplay="{{true}}"
  >
    <swiper-item>
      <image mode="widthFix" src="https://i0.hdslb.com/bfs/album/894654486c7888bde9ab2229fa27452d4d203214.jpg" />
    </swiper-item>
    <swiper-item>
      <image mode="widthFix" src="https://i0.hdslb.com/bfs/album/c188969b65c334cf228fc077a30db8100030ff7e.jpg" />
    </swiper-item>
    <swiper-item>
      <image mode="widthFix" src="https://i0.hdslb.com/bfs/album/521da639b61ee058ed840d4d0a0707b10ca62601.jpg" />
    </swiper-item>
    <swiper-item>
      <image mode="widthFix" src="https://i0.hdslb.com/bfs/album/1a21ddb65d71dea818540a0c9d22ff76891511a3.jpg" />
    </swiper-item>
  </swiper>
  <!-- 在我们的这个位置的话就是设置我们的功能按钮的页面结构 -->
  <view class="content-info-portal">
    <view>
      <image src="https://i0.hdslb.com/bfs/album/9c973062ccd6096eaaff3948eb9d581e85bf2f59.png" />
      <text>每日推荐</text>
    </view>
    <view>
      <image src="https://i0.hdslb.com/bfs/album/6fb0834ec9a25806977fdcb5f181756cd3bf9404.png" />
      <text>云音乐推荐</text>
    </view>
    <view>
      <image src="https://i0.hdslb.com/bfs/album/4a27b30f687ad3e41c9ef2f6e63fde670d126150.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="https://i0.hdslb.com/bfs/album/5035bc2d21fd5fac67363f3ba712cb5dd38f7ea1.jpg" />
        <view>红装</view>
      </view>
      <view class="list-item">
        <image src="https://i0.hdslb.com/bfs/album/5035bc2d21fd5fac67363f3ba712cb5dd38f7ea1.jpg" />
        <view>六月的雨</view>
      </view>
      <view class="list-item">
        <image src="https://i0.hdslb.com/bfs/album/5035bc2d21fd5fac67363f3ba712cb5dd38f7ea1.jpg" />
        <view>莫问归期</view>
      </view>
      <view class="list-item">
        <image src="https://i0.hdslb.com/bfs/album/5035bc2d21fd5fac67363f3ba712cb5dd38f7ea1.jpg" />
        <view>日本音乐</view>
      </view>
      <view class="list-item">
        <image src="https://i0.hdslb.com/bfs/album/5035bc2d21fd5fac67363f3ba712cb5dd38f7ea1.jpg" />
        <view>日本音乐</view>
      </view>
      <view class="list-item">
        <image src="https://i0.hdslb.com/bfs/album/5035bc2d21fd5fac67363f3ba712cb5dd38f7ea1.jpg" />
        <view>日本音乐</view>
      </view>

    </view>
  </view>
</scroll-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>

到我们的这个位置的话我们的代码就都编写完成了：

_沧浪之水_

关注

2
点赞
踩
23

收藏

觉得还不错? 一键收藏
5
评论
微信小程序使用我们的本地服务器编写我们的音乐播放器

第一步的话就是要有一个我们的本地服务器：同时的话我们还要安装我们的nodejs我们的小程序服务端和提取码：链接：https://pan.baidu.com/s/1KWWwNLcyMGkuw6Vk0qG_kQ提取码：wumm复制这段内容后打开百度网盘手机App，操作更方便哦然后的话就是我们的页面代码的编写了：页面效果的展示：我们的tab页面列表的切换的话可以看我们的上一篇博客：好的接下来的话就是我们的文件列表的展示：接下来就是上我们的代码了：<!-- 在我们的这个位置的话就是
复制链接

扫一扫