音乐和图片

// index.js
Page({
  formatDuration(value) {
    let m = parseInt(value / 60)
    let s = value % 60
    if (m < 10) {
      m = '0' + m
    }
    if (s < 10) {
      s = '0' + s
    }
    return m + ':' + s
  },
  stop() {
  },
  onReady() {
    var am = wx.getBackgroundAudioManager()
    am.onEnded(()=>{
      this.setData({
        state: 'paused',
      })
    if(this.data.songIndex == 3){
   wx.showToast({
    title:'所有歌曲播放完毕',
    icon:'none',
    duration:3000
   })
   return
    }
   this.setData({
    animationState: this.data.songIndex + 1
    })
      this.setMusic(this.data.songIndex + 1)
      this.playOrPause()
    })
    am.onTimeUpdate(()=>{
     
   if(!this.sliderChangeLock){
   this.setData({
    currentTime:parseInt(am.currentTime),
    currentTimeText:this.formatDuration(parseInt(am.currentTime))
   })
    }
 })
    this.setData({
      am
    })
    this.setMusic(0)
  },

changeTab(e){
let index = e.traget.dataset.index
this.setData({
  index:2
})

this.setData({
  currentTimeText:this.formatDuration(e.detail.value)
})
},
sliderChanging(e){
this.sliderChangeLock = true
this.setData({
  currentTimeText:this.formatDuration(e.detail.value)
})
},
sliderChange(e){
  let sec = e.detail.value
  this.data.am.seek(sec)
 setTimeout(()=>{
  this.sliderChangeLock = false
 },1000)
},
topPlayList(){
  this.setData({
    index:2
  })
},
next(){
if(this.data.songIndex == 3){
  wx.showToast({
    title:'最后一首',
    icon:'error'
  })
  return
}
this.setData({
  songIndex:this.data.songIndex + 1
})
this.setMusic(this.data.songIndex)
this.playOrPause()

},
playOrPause() {
  if (this.data.isPlaying) {
    this.data.am.pause()
    this.setData({
      playImg: '/img/2paused.png',
      state: 'paused',
      isPlaying:false
    })
  } else {
    this.data.am.title = this.data.title
    this.data.am.src = this.data.url
    this.data.am.play()
    this.setData({
      playImg: '/img/2play.png',
      state: 'running',
      isPlaying:true
    })

  }
},
play() {
  this.data.am.src = this.data.src
    this.data.am.play()
    this.setData({
      playImg: '/img/2play.png',
     state: 'running',
      isPlaying:true
    }) 
},
itemTap(e){
let songIndex = e.currentTarget.dataset.index
this.setData({
  songIndex
})
  this.setMusic(songIndex)
  this.playOrPause()
},

setMusic(index){
this.setData({
  currentTimeText:'00:00',
  currentTime:0,
  duration: '00:00',
  state: 'paused',
  playImg: '/img/2paused.png',
  isPlaying: false,
  url:this.data.songList[index].url,
  title:this.data.songList[index].name,
  singer:this.data.songList[index].author,
})
},
  data: {
    songIndex:0,
    sliderChangeLock:false,
    currentTimeText:'00:00',
    currentTime:0,
    sliderMax:230,
    duration: '00:00',
    state: 'paused',
    playImg: '',
    isPlaying: false,
    index:1,
    songList: [{
        name: '千千阙歌',
        author: '陈慧娴',
        url:'https://ym8888.xyz:3000/materials/4.mp3',
        isPlaying: '',
      },
      {
        name: '在希望的田野上',
        author: '张也',
        url:'https://ym8888.xyz:3000/materials/1.mp3',
        isPlaying: '',
      },
      {
        name: '没有共产党就没有新中国',
        author: '群星合唱团',
        url:'https://ym8888.xyz:3000/materials/2.mp3',
        isPlaying: '',
      },
      {
        name: '舞曲',
        author: '未知',
        url:'https://ym8888.xyz:3000/materials/3.mp3',
        isPlaying: '',
      },
    ]
  }
})

/* pages/index/index.wxss */
page{
  display: flex;
  flex-direction: column;
  background: #17181a;
  color: #ccc;
  height: 100%;
}
.content-play{
  margin: 35rpx 15rpx;
  row-gap: 120rpx;
  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 20s 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-bottom: 40rpx;
  font-size: 9pt;
  text-align: center;
}
.content-play-progress > view {
  flex: 1;
}
.player{
  display: flex;
  align-items: center;
  background: #222;
  border-top: 1rpx solid #252525;
  height: 112rpx;
}
.player-cover{
  width: 80rpx;
  height: 80rpx;
  margin-left: 15rpx;
  border-radius: 8rpx;
  border:1rpx soild #333;
}
.play-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;
}
.player-controls{
  padding-left: 80rpx;
}

<view class="content-play">
  <!-- 显示音乐信息 -->
  <view class="play-info">
  <view class="paly-info-title">{{title}}</view>
  <view class="play-info-singer">---{{singer}}---</view>
</view>
  <!-- 显示专辑封面 -->
  <view class="content-play-cover">
    <image  src="/img/test.jpg" style="animation-play-state:{{state}}" />
  </view>
  <!-- 显示播放进度和时间 -->
  <view class="content-play-progress">
    <text>{{currentTimeText}}</text>
    <view>
      <slider activeColor="#d33a31" block-size="12" backgroundColor="#dadada" value="{{currentTime}}" bindchange="sliderChange" bindchanging="sliderChanging" />
    </view>
    <text>{{duration}}</text>
  </view>
</view>

<view  class="player">
  <image class="player-cover" style="animation-play-state: {{animationState}};" src="/img/test.jpg" />
<view class="play-info">
  <view class="paly-info-title">{{title}}</view>
  <view class="play-info-singer">{{singer}}</view>
</view>
<view class="player-controls" wx:key="*this">
  <image bind:tap="topPlayList" src="/img/01.png" mode="" />
  <image bind:tap="playOrPause" src="{{playImg}}" mode="" />
  <image bind:tap="next" src="/img/03.png" mode="" />
</view>
</view>

{
  "pages": [
    "pages/music/music",
    "pages/index/index"
   
  ],
  "window": {
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/music/music",
      "text": "音乐",
      "iconPath": "/img/音乐 (2).png",
      "selectedIconPath": "/img/音乐.png"
    },{
      "pagePath": "pages/index/index",
      "text": "相册",
      "iconPath": "/img/相册 (1).png",
      "selectedIconPath": "/img/相册.png"
  }]
  }
  ,
  
  "sitemapLocation": "sitemap.json",
  "requiredBackgroundModes": ["audio", "location"],
    "lazyCodeLoading": "requiredComponents"
    
  
   
  
   

}

// index.js
Page({
  tempFile3: [],
  data: {
    tishi:'选择至少三张图片来构造轮播图',
    ImgUr1: [],
    tempFile1: null,
    ImgUr2: [],
  },
  preview: function () {
    wx.previewImage({
      urls: this.data.ImgUr1
    })
  },
  previewImage: function (e) {
    wx.previewImage({
      urls: [this.data.ImgUr1[e.currentTarget.dataset.index]],
    })
    console.log(e);
  },
  butt: function () {
    wx.chooseMedia({
      count: 6,
      mediaType: ['mix'],
      sourceType: ['album', 'camera'],
      success: res => {
        res.tempFiles.forEach(emt => {
          this.tempFile3.push(emt.tempFilePath)
          })
          if(this.tempFile3.length<=6){
            this.setData({
              ImgUr1: this.tempFile3
          })
          }
          if (res.tempFiles.length >= 3) {
            this.setData({
              ImgUr2: this.tempFile3
            })
          }else{
            this.setData({
              ImgUr2:[]
            })
          }
       this.tempFile3=[]
      },
      
    })
  }
})

<view class="picture">
 <image data-index="{{index}}" bind:tap="previewImage" src="{{item}}" mode="" wx:for="{{ImgUr1}}" wx:key="*this" />
</view>
<view class="button">
<button  type="primary" size="mini"  bind:tap="butt">选择图片</button>
<button  type="primary"  size="mini" bind:tap="preview">图片预览</button>
</view>
<view class="pictures">
<text class="tishi">{{tishi}}</text>
  <swiper indicator-dots="true">
  <swiper-item wx:for="{{ImgUr2}}" wx:key="*this">
    <image class="image2" src="{{item}}" mode=""/>
  </swiper-item>
</swiper>
</view>

/**index.wxss**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.picture{
  border: 1rpx solid green;
  box-sizing: border-box;
  margin:  15rpx;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  height: 50vh;
  row-gap: 30rpx;
  padding: 80rpx 30rpx;
}
.button{
  display: flex;
  margin: 0 50rpx;
}
.picture> image{
  margin: 3rpx 20rpx;
  width: 15vh;
  height: 15vh;
}
.image2{
  height: 100%;
  width: 100%;
}
.pictures{
  height: 50%;
  border: 5rpx dotted red;
  margin: 50rpx 10rpx;
  position: relative;
}
.tishi{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color:rgb(231, 0, 0);
}