APlayer 内置通知系统用法

基本用法

ap.notice('操作成功');

一行代码就能在播放器上方弹出一条通知。默认显示 2000 毫秒，透明度 0.8。

三个参数

ap.notice(text, time, opacity);

参数组合效果

ap.notice('简单提示');                                    // 2 秒，80% 透明
ap.notice('长提示', 5000);                               // 5 秒
ap.notice('醒目提示', 3000, 1);                          // 3 秒，不透明
ap.notice('永久显示（直到被新通知覆盖）', 0);              // 永不自动消失
ap.notice('', 0);                                        // 实际上是清空通知区域

常见使用场景

错误提示

在 customAudioType 或其他 API 调用失败时给用户明确反馈：

customAudioType: {
    'myType': function(audioElement, audio, player) {
        fetch(audio.url)
            .then(res => {
                if (!res.ok) throw new Error('加载失败');
                audioElement.src = URL.createObjectURL(res);
            })
            .catch(err => {
                player.notice('音频加载失败：' + err.message, 3000);
            });
    }
}

操作反馈

document.getElementById('delete-btn').addEventListener('click', function() {
    ap.list.remove(ap.list.index);
    ap.notice('已从列表移除', 1500);
});

调试信息

开发阶段可以用 notice 快速显示状态：

ap.on('timeupdate', function() {
    if (Math.random() < 0.01) {  // 约 1% 的概率显示
        ap.notice('当前时间: ' + ap.audio.currentTime.toFixed(1) + 's');
    }
});

相关事件

通知显示和隐藏会触发两个事件：

ap.on('noticeshow', function() {
    console.log('通知弹出了');
});

ap.on('noticehide', function() {
    console.log('通知消失了');
});

可以用来做动画或状态同步。

没有单独的 hide() 方法

APlayer 没有提供 ap.notice.hide() 这样的独立 API。要手动隐藏通知，有两种方式：

// 方式一：传空字符串 + 0 时长（实际上是立即清空）
ap.notice('');

// 方式二：用新的通知覆盖旧的
ap.notice('');   // 快速覆盖

设计上 APlayer 认为通知系统就是"短时间显示一条消息"，不允许手动控制生命周期。如果需要更复杂的弹窗，可以自己写 DOM 或用其他 UI 库。

样式定制

notice 的样式由 APlayer 的 CSS 控制。如果你想改变位置、颜色、动画等，可以通过 CSS 覆盖：

.aplayer-notice {
    /* APlayer 通知的类名 */
    color: #fff;
    background: rgba(0, 0, 0, 0.8);
    /* ... 更多自定义 */
}

多次调用的行为

如果在一条通知还没消失时又调用了 ap.notice()：

• 新通知会立即替换旧通知
• 不会排队叠加
• 新通知的计时器重新从 0 开始

这个行为适合做"最后一次提示"式的交互反馈。