从API version 23开始,系统提供歌词组件功能。歌词组件以悬浮窗形式显示于系统桌面,支持歌词内容展示、组件隐藏、组件锁定等操作。暂不支持应用对组件进行自定义样式设置。本文将说明应用接入歌词组件的开发步骤。
调用isDesktopLyricSupported接口判断系统/设备是否支持歌词组件能力,返回true时表示支持歌词组件能力。
创建AVSession实例,通过设置元数据信息填入LRC格式的歌词数据,包含时间标签及对应的歌词文本。不符合LRC格式的歌词数据,系统可能存在解析异常导致无法展示歌词内容。
调用enableDesktopLyric接口启用歌词组件,需传入参数true打开歌词组件。
歌词组件启用后默认是隐藏(不显示),应用可以通过接口主动显示/隐藏歌词组件,具体接口如下:
设置可见性: 调用setDesktopLyricVisible接口,设置歌词组件是否显示。
查询可见性: 调用isDesktopLyricVisible接口,查询当前歌词组件是否显示。
歌词组件启用后默认是非锁定状态,应用可以通过接口主动锁定/解锁歌词组件,具体接口如下:
设置锁定状态: 调用setDesktopLyricState接口,设置歌词窗口是否锁定(限制歌词窗口的拖动、设置等操作)。
查询锁定状态: 调用getDesktopLyricState接口,查询当前歌词组件锁定状态。
应用可以通过系统提供的回调监听歌词组件可见性、锁定状态的变化,具体接口如下:
监听歌词组件是否可见: 监听onDesktopLyricVisibilityChanged,回调返回false,表示当前歌词组件不可见;回调返回true,表示当前歌词组件可见。如需取消该监听,使用offDesktopLyricVisibilityChanged接口。
监听歌词组件是否锁定: 监听onDesktopLyricStateChanged,回调返回false,表示当前歌词组件未锁定;回调返回true,表示当前歌词组件锁定。如需取消该监听,使用offDesktopLyricStateChanged接口。
确保AVSession对象在后台播放期间不被系统回收/应用不主动释放,否则会导致歌词组件异常。
import { avSession as AVSessionManager } from '@kit.AVSessionKit';
import { BusinessError } from '@kit.BasicServicesKit';
// ...
@Entry
@Component
struct Index {
@State message: string = 'hello world';
// ...
build() {
Column() {
// ...
Text(this.message)
.onClick(async () => {
console.info(`DesktopLyric set start`);
let context = this.getUIContext().getHostContext() as Context;
// 假设已经创建了一个session,如何创建session可以参考之前的案例。
let session = await AVSessionManager.createAVSession(context, 'SESSION_NAME', 'audio');
// 系统是否支持歌词组件
let isDesktopLyricSupported: boolean = false;
try {
isDesktopLyricSupported = await AVSessionManager.isDesktopLyricSupported();
} catch (err) {
console.error(`Failed to get isDesktopLyricSupported. Code: ${err.code}, message: ${err.message}`);
}
if (!isDesktopLyricSupported) {
return;
}
try {
// 使能歌词组件
await session.enableDesktopLyric(true);
} catch (err) {
console.error(`enableDesktopLyric err. Code: ${err.code}, message: ${err.message}`);
}
try {
// 监听歌词组件是否显示
session.onDesktopLyricVisibilityChanged((isVisible: boolean) => {
console.info(`onDesktopLyricVisibilityChanged changed: ${isVisible}`)
});
} catch (err) {
console.error(`onDesktopLyricVisibilityChanged err. Code: ${err.code}, message: ${err.message}`);
}
try {
// 监听歌词组件锁定状态
session.onDesktopLyricStateChanged((state) => {
console.info(`onDesktopLyricStateChanged changed: ${state.isLocked}`)
});
} catch (err) {
console.error(`onDesktopLyricStateChanged err. Code: ${err.code}, message: ${err.message}`);
}
try {
// 显示或隐藏歌词组件,歌词组件使能后默认隐藏
await session.setDesktopLyricVisible(true);
} catch (err) {
console.error(`setDesktopLyricVisible err. Code: ${err.code}, message: ${err.message}`);
}
try {
// 锁定或解锁歌词组件,歌词组件使能后默认是解锁状态
await session.setDesktopLyricState({isLocked: true});
} catch (err) {
console.error(`setDesktopLyricState err. Code: ${err.code}, message: ${err.message}`);
}
console.info(`DesktopLyric set done`);
})
}
.width('100%')
.height('100%')
}
}