为什么我的音频结束后不重复？

Question

我正在尝试使用 Howler.js 重播音频文件

(jump.mp3)

。但是，音频仅播放一次，结束后不会重复播放。

我的期望：

音频到达结尾后应循环播放（自动重复）。

发生了什么：

音频仅播放一次，结束后不再重复。

如何修改代码以确保音频播放完毕后自动重复？

这是完整的 Stackblitz 演示。

这是我的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Audio Example</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <button onclick="repeatAudio()">Repeat Audio</button>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/howler.min.js"></script>
    <script>
      class AudioManager {
        static sounds = {};
        static volume = 1;

        static load(audioFile) {
          if (!this.sounds[audioFile]) {
            this.sounds[audioFile] = new Howl({
              src: [audioFile],
              volume: this.volume,
              preload: true,
              onend: () => {},
            });
          }
        }

        static play(audioFile) {
          if (!this.sounds[audioFile]) {
            this.load(audioFile);
          }
          this.sounds[audioFile].play();
        }

        static replay(audioFile) {
          if (!this.sounds[audioFile]) {
            this.load(audioFile);
          }
          const sound = this.sounds[audioFile];
          sound.stop();
          sound.play();
        }
      }

      function repeatAudio() {
        AudioManager.replay('jump.mp3');
      }
    </script>
  </body>
</html>

Answer 1

您只需将

loop: true

添加到嚎叫设置中即可。

this.sounds[audioFile] = new Howl({
              src: [audioFile],
              volume: this.volume,
              preload: true,
              onend: () => {},
              loop: true,
            });

为什么我的音频结束后不重复？

问题描述投票：0回答：1

1个回答

最新问题

为什么我的音频结束后不重复？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1