uni-app 音乐播放通知栏显示封面图以及进度 暂停等功能

发布于 1周前 作者 eggper 来自 Uni-App

uni-app 音乐播放通知栏显示封面图以及进度 暂停等功能

音乐播放时，通知栏自动出现控制菜单项，类似于现在的主流音乐播放器

Harmonyos Next教程
4 回复

iOS的背景音频播放是现成的。Android需要原生插件适配各种rom


uni.getBackgroundAudioManager()这个接口，是ios自带通知栏播放吗？我试了没有唉

回复 3***@qq.com: 是的，可以看hello uni-app的示例

在uni-app中实现音乐播放时在通知栏显示封面图、进度条以及提供暂停等功能，可以借助Android的原生代码和uni-app的插件机制来完成。以下是一个简要的实现思路和代码示例：

实现思路

  1. 使用uni-app的插件机制：通过自定义原生插件来与Android原生代码进行交互。
  2. 在Android端实现通知栏控制：使用RemoteViews和NotificationManager来创建和更新通知栏。
  3. 在JavaScript端控制播放逻辑：通过uni-app的API与原生插件通信，实现播放、暂停、更新进度等功能。

代码示例

Android原生插件代码（Java）

// MyNotificationPlugin.java
import android.app.Notification;
import android.app.NotificationChannel;
import android.app.NotificationManager;
import android.app.PendingIntent;
import android.app.Service;
import android.content.BroadcastReceiver;
import android.content.Context;
import android.content.Intent;
import android.content.IntentFilter;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Build;
import android.os.IBinder;
import android.view.RemoteViews;
import android.widget.RemoteViewsService;

public class MyNotificationPlugin extends Service {
    // 实现服务逻辑，包括创建通知渠道、更新通知等
    // 省略具体实现细节，如获取封面图、更新进度等
    // 需要通过广播接收器接收来自uni-app的指令，如播放、暂停等
}

// MyRemoteViewsFactory.java
// 用于生成RemoteViews的工厂类，用于显示播放列表等（可选）

uni-app端代码（JavaScript）

// 调用原生插件的方法
function showNotification(coverImage, trackName, artist) {
    plus.android.importClass('android.graphics.BitmapFactory');
    const context = plus.android.runtimeMainActivity();
    const bitmap = BitmapFactory.decodeResource(context.getResources(), coverImage); // 假设coverImage是资源ID
    
    // 调用原生插件方法，传递封面图、歌曲名等信息
    const MyNotificationPlugin = plus.android.importClass('com.example.MyNotificationPlugin');
    const intent = new plus.android.Intent(context, MyNotificationPlugin);
    intent.putExtra('coverImage', bitmap);
    intent.putExtra('trackName', trackName);
    intent.putExtra('artist', artist);
    context.startService(intent);
}

// 暂停播放
function pauseMusic() {
    // 调用原生插件的暂停方法
    const MyNotificationPlugin = plus.android.importClass('com.example.MyNotificationPlugin');
    const context = plus.android.runtimeMainActivity();
    const intent = new plus.android.Intent(context, MyNotificationPlugin);
    intent.setAction('ACTION_PAUSE');
    context.sendBroadcast(intent);
}

注意事项

  • 上述代码仅为示例，未包含完整实现，如处理生命周期、错误处理等。
  • MyNotificationPlugin服务需要处理广播接收，并根据接收到的指令执行相应的操作，如更新通知、暂停播放等。
  • 封面图需要转换为Bitmap对象传递给原生代码，这里假设coverImage是资源ID，实际使用时可能需要从网络加载或本地文件加载。
  • 在uni-app中调用原生插件时，需确保插件已正确集成并注册。
回到顶部