小程序H5 audio相关用法

// 第一次播放时IOS没声音，因此需要在点击时先执行一次播放audio.play(); 在生命周期内自动执行有的浏览器会拦截，因此这样做最保险

<audio src="b.mp3" controls="controls" preload id="music1"></audio>
<span id="bf" onclick="bf();">播放/暂停</span>
<span id="bf" onclick="rbf();">重新播放</span>

function rbf(){
    const audio = document.getElementById('music1');
    audio.load(); // 重新加载音频并将其设置为初始状态


    // audio.currentTime = 0; // 不生效则使用下面的代码
    // audio.src = encodeURI(audio.src);
    // audio.seek(0); // 播放位置移动到开始
}
function bf (){
    const audio = document.getElementById('music1');
    if (audio.paused) {
        audio.play(); // 这个就是播放
    } else {
        audio.pause(); // 这个就是暂停
    }
}

// 监听audio标签正在播放事件
要监听`<audio>`标签正在播放的事件，可以使用`play`事件。当音频开始播放时，`play`事件将被触发。

以下是一种监听`<audio>`标签播放事件的方法：

1. 首先，在HTML中添加一个`<audio>`标签，并设置一个唯一的id属性，例如：
```html
<audio id="myAudio" src="audio.mp3"></audio>
```

2. 在JavaScript中，获取该`<audio>`元素的引用，例如：
```javascript
const audio = document.getElementById('myAudio');
```

3. 使用`addEventListener`方法来监听`play`事件。当音频开始播放时，绑定的回调函数将被触发。例如：
```javascript
audio.addEventListener('play', function() {
  console.log("音频正在播放");
});
```

通过以上步骤，可以使用JavaScript监听`<audio>`标签的播放事件。当音频开始播放时，绑定的回调函数将被执行。你可以在回调函数中执行任何你想要的操作。