基于JS卡片实现功能丰富的HarmonyOS鸿蒙Next音乐播放器

基于JS卡片实现功能丰富的HarmonyOS鸿蒙Next音乐播放器 #HarmonyOS征文#基于JS卡片实现功能丰富的音乐播放器

一、文章简介

这是一款基于JS卡片打造的音乐播放卡片应用，我们可以通过桌面卡片来获取音乐播放的信息，也可以进行播放、暂停、歌曲切换等功能。

效果展示

• 2X2卡片展示歌曲封面、播放状态、播放进度、歌曲名称等信息。
• 4X4卡片增加歌词展示。
• 通过卡片即可操作音乐播放、暂停、切换等操作。

二、搭建HarmonyOS环境

1. 安装DevEco Studio，详情请参考DevEco Studio下载。

2. 设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，可以根据如下两种情况来配置开发环境：

   • 如果可以直接访问Internet，只需进行下载HarmonyOS SDK操作。
   • 如果网络不能直接访问Internet，需要通过代理服务器才可以访问，请参考配置开发环境。

3. 本程序需要在真机运行，需要提前申请证书：

   • 准备密钥和证书请求文件：准备密钥和证书请求文件
   • 申请调试证书：申请调试证书

三、音乐卡片开发

1. 功能设计

卡片的功能有三部分：

• 信息展示
• 页面跳转
• 数据交互

因此我们可以实现的功能有：

• 歌曲名称、歌手名称、歌曲封面等信息展示
• 卡片跳转至播放器主页，并且数据同步
• 播放、暂停、歌曲切换
• 播放进度展示

2. Java卡片与JS卡片选型

确定了我们要实现的功能后，再进行Java卡片与JS卡片选型，如图所示，java卡片支持的组件比较少，无法满足我们的功能需求。

3. 代码结构

4. JS界面实现

4.1 新建卡片

4.2 选择模板

工具为我们提供了多个模板，我们选择一个音乐播放模板

4.3 卡片配置

创建完成后，config.json文件中会自动生成卡片配置的参数，我们可以在此处设置卡片的名称、规格、类型等参数，详细配置请参考：卡片配置参数详解

Java Ability中的jsComponentName和js模块下的name相对应。

4.4 JS page

创建完成后有三个文件，js文件为卡片提供数据，hml文件编写布局属性，css文件编写控件样式

4.5 布局编写

js为卡片提供数据，配置跳转事件和message事件

export default {
    data: {
        //歌曲封面
        picName: "/common/music.png",
        //进度条的值
        progressValue: 0,
        //按钮点击发送message
        last: "last",
        play: "play",
        next: "next",
        //歌曲名
        songName: "未播放",
        //歌手名
        singer: "未知歌手",
        //歌词列表
        lyric: [{
            fontColor: "#9C9C9C",
            fontSize: "14px",
            Lrc: "",
        }],
        actions: {
            //跳转事件
            routerEvent: {
                action: "router",
                bundleName: "com.example.wryproject",
                abilityName: "com.example.wryproject.MusicAbility"
            },
            //message事件
            lastEvent: {
                action: "message",
                params: {
                    message: this.last
                }
            },
            playEvent: {
                action: "message",
                params: {
                    message: this.play
                }
            },
            nextEvent: {
                action: "message",
                params: {
                    message: this.next
                }
            },
        }
    }
}

hml代码：

<div class="container">
    <div class="title_container">
        <image src="{{ picName }}" @click="routerEvent" class="music-img"></image>
        <div class="songData">
            <text class="songName">{{ songName }}</text>
            <text class="singer">{{ singer }}</text>
        </div>
    </div>
    <list class="lyric_list">
        <list-item class="lyric_list_item" for="{{ lyric }}">
            <text class="lyric_text" style="color : {{ $item.fontColor }}; font-size : {{ $item.fontSize }};">{{ $item.Lrc }}</text>
        </list-item>
    </list>
    <div class="button_container">
        <progress class="progress" type="ring" percent="{{ progressValue }}"></progress>
        <image src="{{ lastImage }}" @click="lastEvent" class="last-img"></image>
        <image src="{{ playImage }}" @click="playEvent" class="play-img"></image>
        <image src="{{ nextImage }}" @click="nextEvent" class="next-img"></image>
    </div>
</div>

css代码较长，这里只贴出一部分：

.container {
    width: 100%;
    height: 100%;
}
.title_container {
    height: 70%;
    width: 100%;
    flex-direction: row;
    position: absolute;
    top: 5;
}
.music-img {
    background-color: #0F000000;
    height: 50%;
    width: 40%;
    object-fit: contain;
    border-radius: 10px;
    margin-left: 8%;
    margin-top: 8%;
    position: absolute;
}
.songData {
    height: 50%;
    width: 50%;
    position: absolute;
    flex-direction: column;
    align-items: center;
    padding-right: 10%;
    right: 3%;
    top: 8%;
}

初始预览效果：

四、开发总结

此项目的开发，使我们掌握了：

• JS卡片的布局编写：JS编写布局相对于JAVA更加高效。例如 JS 组件list，只需三五行代码即可实现列表的基本展示，大大提升了我们的开发效率，JS+JAVA的混合开发模式是一个很不错的开发方案。
• 卡片的跳转和交互：通过卡片快速直达我们需要的页面，减少层级交互，应用的使用场景更加丰富，操作也更加便捷高效。
• 卡片数据的实时更新：卡片成为应用信息展示的直接载体，真正做到“信息直达”，只需解锁手机即可获取到我们需要的信息。
• Player的简单使用：音视频播放作为手机的常用功能之一，有相当多的用武之地，掌握Player的使用是各位开发者的必经之路。
• 本地音频资源的获取：数据是一个应用的基础，学会合理使用这些数据、资源也是各位开发者需要掌握的基础。

开发过程中遇到的问题：

1. 直接传入音频地址封面获取失败

   • 解决方案：通过传入文件描述符获取封面

2. 网络获取歌词失败

   • 解决方案：在config.json中添加网络明文请求设置为true

3. 卡片封面更新无效

   • 解决方案：考虑到定时器中更新封面代价较大，我们可以分为两种方案：

     • 计时器定时更新文字、进度条等占用性能较小的组件。
     • 返回桌面时应用失去焦点，在onInactive方法中更新卡片的图片数据即可减少性能损耗。

4. 卡片歌词列表如何实现

   • 解决方案：定时刷新列表数据，我们只给列表设置5条数据，然后定时更新不同的歌词传入列表，达到列表伪滚动效果。

5. 音乐在后台播放，几秒钟后音乐自动暂停，进入应用后音乐又开始自动播放。

   • 解决方案：在手机自带的手机管家–>应用启动管理–>找到自己的应用关闭自动管理–>打开允许后台活动，应用就不会被冻结了。

以上就是本人遇到的一些问题，希望可以给各位开发者提供参考。由于篇幅有限，文章有很多细节并不能面面俱到，感兴趣的小伙伴可以通过文章末尾链接下载项目，文中写的不好的地方欢迎大家提出建议，大家也可以在评论区多多交流，共同进步~

代码奉上：gitee