Question

我正在使用Howler JS在网站上播放歌曲。我只想播放一部分歌曲。

我会为每个mp3制作一个精灵，然后可以播放这些精灵。但是，音频播放需要很长时间。就像先下载整个mp3，然后启动精灵，这实际上会降低性能并消耗带宽。我根本不熟悉Howler，也许有一种方法可以只下载要播放的部分，或者如果没有，有没有其他库/方法可以做到这一点？

         <div
          className="playExtrait"

          onClick={() => {
            Howler.unload();
            let song = new Howl({
              src: [url],
              html5: true,
              sprite: {
                extrait: [0, 30000]
              }
            });

            let songID = song.play("extrait");
            setPlayPause("playing");
            song.fade(1, 0, 30000, songID);
            song.on("end", () => {
              setPlayPause("paused");
            });
          }}
        >

Answer 1

您可以使用Media Fragments URI来创建媒体每个特定时间段的记录，例如，将src元素的<audio>设置为/path/to/media#t=10,15以播放10至15秒的媒体资源，以及MediaRecorder来记录播放并将记录保存为.webm媒体文件，其中MediaRecorder在{ pause的{1}}事件。

请参见

有关将多个媒体片段串联到单个记录中的示例，请参见MediaFragmentRecorder（存储库中代码的作者）。当使用HTMLMediaElement记录MediaSource流时，Chromium / Chrome的MediaRecorder会出现问题，尽管该代码在Firefox上仍然可以产生预期的结果。

制作音频精灵而不加载完整的歌曲

1 个答案: