鸿蒙OS 音频播放流管理，监听到状态为播放中/暂停时，改变播放按钮的UI显示

AudioRenderer 是一个负责音频播放的核心组件。它提供了一系列方法和事件，让你能够控制音频播放过程，并获取播放状态信息。比如，实时更新播放按钮的 UI，以反映音频播放流的播放/暂停状态。

使用步骤如下：

一、监听状态变化

为了实时更新 UI，你需要监听 AudioRenderer 的状态变化。可以使用以下两种方法：

方法 1：直接读取 state 属性

let audioRendererState = audioRenderer.state;
console.info(`Current state is: ${audioRendererState}`);

方法 2：注册 stateChange 事件监听

audioRenderer.on('stateChange', (rendererState) => {
  console.info(`State change to: ${rendererState}`);
});

二、更新 UI

根据 AudioRenderer 的状态，更新播放按钮的 UI。

let playButton = document.getElementById('playButton');

audioRenderer.on('stateChange', (rendererState) => {
  if (rendererState === audio.AudioState.PLAYING) {
    playButton.textContent = '暂停'; // 更改按钮文字
    playButton.classList.add('playing'); // 添加样式
  } else if (rendererState === audio.AudioState.PAUSED) {
    playButton.textContent = '播放';
    playButton.classList.remove('playing');
  }
});

三、处理其他状态

除了播放和暂停，AudioRenderer 还拥有其他状态，例如：

• audio.AudioState.INITIALIZED: 初始化状态
• audio.AudioState.BUFFERING: 缓冲状态
• audio.AudioState.ERROR: 错误状态

你可以根据需要添加其他状态的 UI 更新逻辑。记得在使用完 AudioRenderer 后，调用 audioRenderer.destroy() 方法释放资源。