微信小程序音乐播放器页面代码

微信小程序的音乐播放器页面通常会包含一些HTML结构元素，如`view`, `audio`标签以及按钮等交互组件。下面是一个基本的示例代码：

<!-- app.wxss -->
.page-music-player {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.audio-container {
  width: 300px;
  margin: 20px auto;
}

.audio-player {
  display: flex;
  flex-direction: column;
}

.play-btn {
  padding: 10px 20px;
  background-color: #4295f4;
  color: white;
  border: none;
  cursor: pointer;
}

<!-- index.wxml -->
<view class="page-music-player">
  <view class="audio-container">
    <audio id="musicPlayer" src="{{musicUrl}}" controls></audio>
  </view>
  <button bindtap="playMusic" class="play-btn">播放</button>
  <button bindtap="pauseMusic" class="play-btn disabled">暂停</button>
</view>

// index.js
Page({
  data: {
    musicUrl: '你的音频文件URL', // 替换为你实际的音频资源地址
  },
  
  playMusic: function() {
    var audio = wx.createSelectorQuery().select('#musicPlayer').get();
    if (audio) {
      audio.play();
      this.setData({
        playBtnClass: 'play-btn disabled',
      });
    }
  },
  
  pauseMusic: function() {
    var audio = wx.createSelectorQuery().select('#musicPlayer').get();
    if (audio && audio.paused) {
      audio.pause();
      this.setData({
        playBtnClass: 'play-btn',
      });
    }
  },
})

这个例子中，我们创建了一个简单的音乐播放器，包括一个音频元素和两个按钮（播放和暂停）。当用户点击播放按钮时，会播放音频并禁用该按钮；点击暂停按钮则暂停播放，并启用按钮。