简洁版个人听歌小程序实战

是常常的博客.

已于 2023-07-02 14:12:19 修改

阅读量295

点赞数

文章标签： javascript 前端 web

于 2023-07-02 13:55:24 首次发布

本文链接：https://blog.csdn.net/weixin_56660479/article/details/131500282

版权

这是一个展示如何创建一个简单的音乐微信小程序的示例，包括播放音乐和显示歌曲列表的功能。通过index.wxml、index.js和index.wxss文件实现界面和逻辑，点击歌曲列表项播放对应音乐，利用wx.createAudioContext进行音频控制。

摘要由CSDN通过智能技术生成

以下是一个简单的音乐微信小程序示例代码，可以播放音乐和展示歌曲列表（需要进阶版优化版的可以在评论区艾特我哦）：

index.wxml


<!-- index.wxml -->
<view class="container">
  <view class="header">我的音乐播放器demo</view>
  <view class="song-list">
    <block wx:for="{{songs}}" wx:key="index">
      <view class="song-item" bindtap="playSong" data-song="{{item}}">
        <text>{{item.name}}</text>
      </view>
    </block>
  </view>
  <audio hidden="{{!isPlaying}}" id="myAudio" src="{{currentSong.url}}" bindended="onSongEnded"></audio>
</view>

index.js


// index.js
Page({
  data: {
    songs: [
      { name: "歌曲1", url: "http://www.example.com/song1.mp3" },
      { name: "歌曲2", url: "http://www.example.com/song2.mp3" },
      { name: "歌曲3", url: "http://www.example.com/song3.mp3" },
    ],
    isPlaying: false,
    currentSong: {},
  },

  playSong: function (event) {
    var song = event.currentTarget.dataset.song;
    this.setData({
      isPlaying: true,
      currentSong: song
    });
    var audioContext = wx.createAudioContext('myAudio');
    audioContext.play();
  },

  onSongEnded: function () {
    this.setData({
      isPlaying: false,
      currentSong: {}
    });
  }
})

index.wxss


/* index.wxss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header {
  font-size: 24px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.song-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.song-item {
  padding: 10px;
  border-bottom: 1px solid #ccc;
  width: 100%;
  box-sizing: border-box;
}

.song-item:last-child {
  border-bottom: none;
}

小程序功能简述：

这个示例中，`songs` 列表是一个包含歌曲信息的数组，每个歌曲都有 `name` 和 `url` 属性。

在页面渲染时，使用 `wx:for` 指令遍历 `songs` 数组，生成歌曲列表。

每个歌曲都是一个 `song-item` 元素，可以通过点击 `song-item` 元素来播放对应的歌曲。

项目总结：

在 JavaScript 中，通过 `bindtap` 事件绑定和 `data-song` 自定义属性传递被点击的歌曲信息。播放器的逻辑在 `playSong` 函数中，将点击的歌曲信息设置到 `currentSong` 中，然后通过 `wx.createAudioContext` 创建音频上下文，并调用 `play` 方法播放歌曲。

当歌曲播放结束后，通过 `bindended` 事件绑定的 `onSongEnded` 函数将 `isPlaying` 设置为 false，以便在页面中展示歌曲已停止播放。