如何仅在正在播放音频的图标上更改图标的状态？

要在正在播放音频的图标上更改图标的状态，可以通过以下步骤实现：

首先，需要使用前端开发技术来创建一个包含音频播放功能的页面。可以使用HTML5的<audio>标签来嵌入音频文件，并使用JavaScript来控制音频的播放和暂停。
在页面中，可以使用CSS来定义不同状态下的图标样式。可以使用字体图标库或自定义图标来表示播放和暂停状态。
在JavaScript中，可以通过监听音频的播放状态来动态改变图标的样式。可以使用play和pause事件来监听音频的播放和暂停操作，并在事件处理函数中修改图标的样式。
在事件处理函数中，可以通过操作DOM元素来改变图标的样式。可以使用JavaScript选择器获取图标元素，并使用classList属性来添加或移除CSS类，从而改变图标的样式。
如果需要在图标上显示进度条或其他交互元素，可以使用Canvas或SVG等技术来绘制图形，并根据音频的播放进度来更新图形的状态。

以下是一个示例代码片段，演示了如何在正在播放音频的图标上更改图标的状态：

<!DOCTYPE html>
<html>
<head>
  <style>
    .play-icon {
      /* 播放状态下的图标样式 */
      /* 使用字体图标库或自定义图标 */
    }

    .pause-icon {
      /* 暂停状态下的图标样式 */
      /* 使用字体图标库或自定义图标 */
    }
  </style>
</head>
<body>
  <audio id="audio" src="audio.mp3"></audio>
  <button id="playButton" class="play-icon"></button>

  <script>
    var audio = document.getElementById('audio');
    var playButton = document.getElementById('playButton');

    playButton.addEventListener('click', function() {
      if (audio.paused) {
        audio.play();
        playButton.classList.remove('play-icon');
        playButton.classList.add('pause-icon');
      } else {
        audio.pause();
        playButton.classList.remove('pause-icon');
        playButton.classList.add('play-icon');
      }
    });
  </script>
</body>
</html>

在这个示例中，我们使用了一个<audio>标签来嵌入音频文件，并使用了一个按钮元素作为播放图标。通过监听按钮的点击事件，我们可以切换音频的播放和暂停状态，并根据状态改变按钮的样式。

请注意，这只是一个简单的示例，实际应用中可能需要更复杂的逻辑和样式。具体的实现方式可以根据项目需求和技术栈进行调整。

推荐的腾讯云相关产品：腾讯云音视频服务（https://cloud.tencent.com/product/tcavs）提供了丰富的音视频处理能力，可以满足音视频处理和云直播等需求。