能够选择音频播放器的起点和终点

问题描述

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

预先感谢

解决方法

JavaScript修剪音频文件

这是我使用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>