javascript - 能够在音频播放器上选择起点和终点

Question

我想要一个前端带有波形的音频播放器，并且能够在音频播放器上选择起点和终点并将这些点发送到后端以 trim 音频。另外，如果我可以在音频播放器上拖动这些点来选择特定的部分，那就太好了。

提前致谢

Answer 1

JavaScript trim 音频文件

下面是我如何使用 https://wavesurfer-js.org/ 完成的

const EL_play = document.querySelector("#play");
const EL_loop = document.querySelector("#loop");

const RegionsPlugin = WaveSurfer.regions;
const wavesurfer = WaveSurfer.create({
  container: "#waveform",
  waveColor: "#999",
  progressColor: "#000",
  mediaControls: true,
  loopSelection: true,
  plugins: [
    RegionsPlugin.create(),
  ],
});

const Trim = {
  loop: EL_loop.checked,
  options: {
    id: "Trim",
    start: 0,
    color: "rgba(0, 100, 255, 0.1)",
  },
  time: 0,
  create(re) {
    this.options.start = 0; // Set Trim start
    this.options.end = wavesurfer.getDuration(); // Set Trim end to match audio duration
    wavesurfer.addRegion(this.options); // Add Trim region to WaveSurfer instance
    this.Region = wavesurfer.regions.list[this.options.id];
  },
  trimTime() {
    const wasPlaying = wavesurfer.isPlaying();
    const re = this.Region;
    const isEnd = this.time >= re.end;
    this.time = Math.min(Math.max(wavesurfer.getCurrentTime(), re.start), re.end);
    if (isEnd) this.time = re.start;
    if (isEnd && !this.loop) wavesurfer.pause();
    wavesurfer.setCurrentTime(Math.max(0, this.time)); // https://github.com/katspaugh/wavesurfer.js/issues/1816
  },
  play() {
    wavesurfer.playPause();
  },
};

const updateUI = () => {
  EL_play.classList.toggle("isPlaying", wavesurfer.isPlaying());
};

EL_loop.addEventListener("change", () => Trim.loop = EL_loop.checked); // play pause events
EL_play.addEventListener("click", () => Trim.play()); // play pause events
wavesurfer.on("region-updated", () => Trim.trimTime());
wavesurfer.on("ready", () => Trim.create());
wavesurfer.on("play", updateUI);
wavesurfer.on("pause", updateUI);
wavesurfer.on("audioprocess", () => Trim.trimTime());
wavesurfer.load("http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg"); // Load Sound!

.wavesurfer-region {
  z-index: 0 !important; /* Place Trim "background" below the wave */
  pointer-events: none; /* Ignore mouse on trim region */
}

.wavesurfer-handle.wavesurfer-handle-start,
.wavesurfer-handle.wavesurfer-handle-end {
  width: 5px !important; /* Easy way to prevent handlers disappear due to width 1% */
  pointer-events: auto; /* Allow mouse on trim handlers */
}

.wavesurfer-handle.wavesurfer-handle-start {
  background-color: #0bf !important;
}

.wavesurfer-handle.wavesurfer-handle-end {
  background-color: #f0b !important;
}

#play:before { content: "\23F5"; }
#play.isPlaying:before { content: "\23F8"; }

<div id="waveform"></div>
<button id="play"></button>
<label><input id="loop" type="checkbox" checked> Loop</label>

<script src="https://unpkg.com/wavesurfer.js"></script>
<script src="https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.regions.min.js"></script>