【愚公系列】《微信小程序与云开发从入门到实践》024-开发音乐播放器软件

原创

愚公搬代码

发布于 2025-01-18 23:28:52

11100

代码可运行

文章被收录于专栏：愚公系列-书籍专栏愚公系列-书籍专栏

运行总次数：0

代码可运行

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

🚀前言

在数字音乐盛行的今天，音乐播放器成为了人们日常生活中不可或缺的一部分。微信小程序以其轻便、便捷的特性，成为开发音乐播放器的理想选择。通过小程序，用户可以随时随地享受高品质的音乐体验，而开发者则能够利用微信平台的丰富生态，快速构建和推广自己的音乐应用。

本篇文章将深入探讨如何开发一款功能丰富的微信小程序音乐播放器。我们将从基础知识入手，逐步介绍音频播放的相关组件、功能实现、用户界面设计，以及如何优化用户体验。同时，我们还会分享一些实用的开发技巧和注意事项，帮助你在实现音乐播放器的过程中，避免常见的陷阱和挑战。

无论你是刚开始接触小程序开发的初学者，还是希望提升应用功能的经验丰富的开发者，这篇文章都将为你提供宝贵的见解和实用的指导。让我们一起踏上开发音乐播放器的旅程，创造出一个引人入胜的音乐世界吧！

🚀一、开发音乐播放器软件

我们将尝试开发一款简单的音乐播放器软件，此小程序包含两个页面，即首页和播页。首页用来展示一些音乐专题，用户可以选择感兴趣的收听，播放页则用来控制专题内音乐的播放，例如音乐切换、暂停等。

🔎1.开发音乐播放器首页

在开发个人音乐云小程序的过程中，我们可以遵循以下步骤来构建项目框架和页面内容，以确保项目的顺利进行和良好的用户体验。

首先，在项目的 pages 文件夹下新建一个名为 musicDemo 的文件夹，用于存放相关页面文件。在该文件夹中，创建一个名为 musicDemoIndex 的页面，并在 musicDemoIndex.json 文件中配置页面的导航栏标题，代码如下：

{
  "usingComponents": {},
  "navigationBarTitleText": "个人音乐云"
}

接下来，我们编写整体的页面框架。主页可以分为三个主要部分：头部、广告部分和专辑列表部分。头部展示当前微信用户的简易信息，广告部分可以用一张图片占位，专辑列表则是核心功能，提供音乐专辑供用户选择。

在 musicDemoIndex.wxml 文件中，编写如下代码：

<!--pages/musicDemo/musicDemoIndex.wxml-->
<view class="header">
 <view class="userAvatar"><open-data type="userAvatarUrl"></open-data></view>
 <view class="userName"><open-data type="userNickName"></open-data></view>
</view>

<view class="banner">
    <image src="../../src/1.png" mode="aspectFill"></image>
    <text>聆听宇宙的\n声音</text>
</view>

<view class="topic" data-type="0" bindtap="pushToPlay">
    <view class="topicLeft1">
        <text class="text">热歌榜</text>
        <text class="time">刚刚更新</text>
    </view>
    <view class="topicRight">
        <view class="li" wx:for="{{songs[0]}}" wx:key="name">
            <text>{{index+1}}.{{item.name}}</text>
        </view>
    </view>
</view>
<view class="topic" data-type="1" bindtap="pushToPlay">
    <view class="topicLeft2">
        <text class="text">飙升榜</text>
        <text class="time">刚刚更新</text>
    </view>
    <view class="topicRight">
        <view class="li" wx:for="{{songs[1]}}" wx:key="name">
            <text>{{index+1}}.{{item.name}}</text>
        </view>
    </view>
</view>
<view class="topic" data-type="2" bindtap="pushToPlay">
    <view class="topicLeft3">
        <text class="text">流行榜</text>
        <text class="time">刚刚更新</text>
    </view>
    <view class="topicRight">
        <view class="li" wx:for="{{songs[2]}}" wx:key="name">
            <text>{{index+1}}.{{item.name}}</text>
        </view>
    </view>
</view>

在 musicDemoIndex.js 文件中，添加逻辑代码以处理用户交互：

// pages/musicDemo/musicDemoIndex.js
Page({
    data: {
        songs:[
            [
                {
                    name:"人间",
                    url:"https://github.com/ZYHshao/MyPlayer/raw/master/%E4%BA%BA%E9%97%B4.mp3"
                },
                {
                    name:"传奇",
                    url:"https://github.com/ZYHshao/MyPlayer/raw/master/%E4%BC%A0%E5%A5%87.mp3"
                },
                {
                    name:"但愿人长久",
                    url:"https://github.com/ZYHshao/MyPlayer/raw/master/%E4%BD%86%E6%84%BF%E4%BA%BA%E9%95%BF%E4%B9%85.mp3"
                }
            ],
            [
                {
                    name:"匆匆那年",
                    url:"https://github.com/ZYHshao/MyPlayer/raw/master/%E5%8C%86%E5%8C%86%E9%82%A3%E5%B9%B4.mp3"
                },
                {
                    name:"天空",
                    url:"https://github.com/ZYHshao/MyPlayer/raw/master/%E5%A4%A9%E7%A9%BA.mp3"
                },
                {
                    name:"影子",
                    url:"https://github.com/ZYHshao/MyPlayer/raw/master/%E5%BD%B1%E5%AD%90.mp3"
                }
            ],
            [
                {
                    name:"我愿意",
                    url:"https://github.com/ZYHshao/MyPlayer/raw/master/%E6%88%91%E6%84%BF%E6%84%8F.mp3"
                },
                {
                    name:"执迷不悟",
                    url:"https://github.com/ZYHshao/MyPlayer/raw/master/%E6%89%A7%E8%BF%B7%E4%B8%8D%E6%82%94.mp3"
                },
                {
                    name:"旋木",
                    url:"https://github.com/ZYHshao/MyPlayer/raw/master/%E6%97%8B%E6%9C%A8.mp3"
                }
            ],
        ]
    },
    pushToPlay:function(event) {
        let type = event.currentTarget.dataset.type;
        let name = "未知";
        if (type == 0) {
            name = "热歌榜";
        } else if (type == 1) {
            name = "飙升榜";
        } else if (type == 2) {
            name = "流行榜";
        }
        wx.navigateTo({
          url: './musicDemoPlay?type='+name+'&info='+JSON.stringify(this.data.songs[type])
        })
    }
})

为了提升页面的美观性，在 musicDemoIndex.wxss 文件中补充样式表：

/* pages/musicDemo/musicDemoIndex.wxss */
.userAvatar {
    width: 34px;
    height: 34px;
    overflow: hidden;
    border-radius: 17px;
    margin-left: 20px;
}

.header {
    margin-top: 15px;
    display: flex;
    flex-direction: row;
}

.userName {
    line-height: 34px;
    font-size: 14px;
    color: #777777;
    margin-left: 10px;
}

.banner {
    margin: 10px;
    width: calc(100%-40px);
    height: 150px;
    overflow: hidden;
    border-radius: 5px;
    position: relative;
}

.banner text {
    position:absolute;
    top: 0px;
    color: white;
    font-size: 25px;
    font-weight: lighter;
    margin-top: 10px;
    margin-left: 10px;
}

.topic {
    margin-left: 10px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
}

.topicLeft1 {
    width: 100px;
    height: 100px;
    background-image: linear-gradient(45deg,#aa497a, #e395b9);
    border-radius: 5px;
    text-align: center;
    position: relative;
}

.topicLeft2 {
    width: 100px;
    height: 100px;
    background-image: linear-gradient(45deg,#67a8b0,#a1d9c7);
    border-radius: 5px;
    text-align: center;
    position: relative;
}

.topicLeft3 {
    width: 100px;
    height: 100px;
    background-image: linear-gradient(45deg,#c2554b, #e6a094);
    border-radius: 5px;
    text-align: center;
    position: relative;
}

.text {
    color: white;
    font-size: 20px;
    font-weight: bold;
    line-height: 100px;
}

.time {
    position:absolute;
    bottom: 5px;
    left: 5px;
    font-size: 10px;
    color: white;
}

.topicRight {
    height: 80px;
    display: flex;
    margin-top: 10px;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
}

.li {
   font-size: 15px;
   color: #919191;
}

通过以上步骤，我们可以构建出一个功能齐全且美观的个人音乐云小程序页面。这不仅展示了我们对技术的掌握，也体现了对用户体验的重视。希望这个项目能够为用户带来愉悦的音乐体验，促进文化的传播与交流。

🔎2.音频播放页面

步骤如下：

创建 musicDemoPlay 页面文件undefined在 musicDemo 文件夹下，新建一个名为 musicDemoPlay 的页面文件，并开始编写页面框架和样式。
编写 musicDemoPlay.wxml 文件undefined在 musicDemoPlay.wxml 中设置音频播放页面的布局结构，代码如下：

<!--pages/musicDemo/musicDemoPlay.wxml-->
<page-meta>
    <navigation-bar title="{{type}}"></navigation-bar>
</page-meta>
<view class="container">
<image class="bg"  src="../../src/2.png"></image>
<view class="header">
    <view class="title"><text>{{currentSong}}</text></view>
</view>
<view class="list">
    <view class="tip"><text>播放列表</text></view>
    <view wx:for="{{info}}" wx:key="name">
        {{item.name}}
    </view>
</view>
<view class="control">
    <button bindtap="previous" type="primary" plain="true" size="mini" style="color: white; border-color: white;">上一曲</button>
    <button bindtap="next" type="primary" plain="true" size="mini" style="color: white; border-color: white;">下一曲</button>
    <button bindtap="play" type="primary" plain="true" size="mini" style="color: white; border-color: white;">{{isPlayed?"暂停":"播放"}}</button>
</view>
</view>

说明：

navigation-bar：标题栏显示歌曲列表或其他标识符（例如 "热歌榜"）。
背景图片 (bg)：用作背景，展示在页面的最底层。
歌曲标题 (currentSong)：显示当前播放的歌曲名称。
播放列表 (info)：展示所有歌曲信息，并可以切换。
控制按钮：用于控制上一曲、下一曲、播放/暂停。

编写 musicDemoPlay.wxss 样式文件undefined在 musicDemoPlay.wxss 文件中定义页面的样式和布局。

/* pages/musicDemo/musicDemoPlay.wxss */
.bg {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.header {
    width: 100%;
    text-align: center;
    color: white;
}

.title {
    font-size: 20px;
    margin-top: 15px;
}

.header image {
    width: 200px;
    height: 200px;
    overflow: hidden;
    border-radius: 10px;
    margin-top: 20px;
    opacity: 0.7;
}

.list {
    color: white;
    margin: 20px;
    text-align: left;
}

.tip {
    font-size: 18px;

}

.control {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-items: space-between;
    margin-top: 60px;
}

说明：

.bg：背景图设置为全屏固定背景。
.container：使用 Flexbox 布局，竖向排列页面内容。
.header：头部区域，包括歌曲封面和标题，设置了居中对齐。
.list：歌曲列表部分，显示播放列表的内容。
.control：控制按钮区，包括上一曲、下一曲、播放/暂停按钮，采用水平布局。

编写 musicDemoPlay.js 文件undefined在 musicDemoPlay.js 中，管理音频的切换和播放控制逻辑。

// pages/musicDemo/musicDemoPlay.js
Page({
    data: {
        currentSong:"暂无播放", // 当前播放的歌曲
        currentIndex:0, // 当前播放的歌曲的索引
        isPlayed:true // 是否正在播放
    },
    onLoad: function (options) {
        let info =  JSON.parse(options.info); // 解析参数
        this.setData({
            info:info,
            type:options.type,
            currentSong:info[0].name
        })
    },
    onReady:function() {
        this.audio = wx.createInnerAudioContext(); // 获取音频上下文
        this.audio.src = this.data.info[0].url;  // 设置音频路径
        this.audio.loop = true; // 设置循环播放
        this.audio.play(); // 开始播放
        this.audio.onEnded(()=>{ // 播放结束的回调，自动开启下一首播放
            this.next();
        });
    },
    previous:function() { // 播放上一首歌曲
        if (this.data.currentIndex > 0) {
            this.audio.src = this.data.info[this.data.currentIndex-1].url; // 设置资源地址
            this.audio.play(); // 开始播放
            this.setData({ // 刷新UI
                currentSong:this.data.info[this.data.currentIndex-1].name,
                currentIndex:this.data.currentIndex-1
            });
            
        } else { // 如果当前已经是第一首，则播放最后一首
            this.audio.src = this.data.info[this.data.info.length-1].url;
            this.audio.play();
            this.setData({
                currentSong:this.data.info[this.data.info.length-1].name,
                currentIndex:this.data.info.length-1
            });
        }
    },
    next:function() { // 播放下一首歌曲
        // 如果当前已经是最后一首，播放第一首
        if (this.data.currentIndex >= this.data.info.length-1) { 
            this.audio.src = this.data.info[0].url; // 设置音频资源
            this.audio.play(); // 开始播放
            this.setData({ // 刷新UI
                currentSong:this.data.info[0].name,
                currentIndex:0
            });
            
        } else { 
            this.audio.src = this.data.info[this.data.currentIndex+1].url; // 设置音频资源
            this.audio.play();  // 开始播放
            this.setData({ // 刷新UI
                currentSong:this.data.info[this.data.currentIndex+1].name,
                currentIndex:this.data.currentIndex+1
            });
        }
    },
    play:function() { // 播放逻辑
        if (this.data.isPlayed) { // 如果正在播放，则停止
            this.audio.stop();
            this.setData({
                isPlayed: false
            });
        } else { // 如果没有正在播放，则开始播放
            this.audio.play();
            this.setData({
                isPlayed: true
            });
        }
    }
})

说明：

previous 和 next：处理上一曲和下一曲的切换。
play：控制播放/暂停，利用 isPlayed 状态进行切换。

通过以上步骤，我们将完成音频播放页面的设计，包含了页面的布局、样式和播放控制逻辑。在实际项目中，还需要处理音频的播放、暂停以及根据歌曲的具体情况更新页面状态。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S11#重启人生

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S11#重启人生

登录后参与评论

0 条评论

热度