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

Posted 2023-03-07

【中文标题】能够在音频播放器上选择起点和终点

【英文标题】：Ability to select start and end point on audio player

【发布时间】：2020-08-16 21:00:30

【问题描述】：

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

提前致谢

【问题讨论】：

html5 视频 API

到目前为止您尝试过的代码在哪里？请edit 并创建一个minimal reproducible example。如有疑问，请阅读How to Ask。

github.com/katspaugh/wavesurfer.js#readme

@GetSet 我会检查 HTML5 Video API。谢谢

@RokoC.Buljan 到目前为止，我一直在使用 HTML 5 音频播放器，并在搜索处理程序中使用它来选择开始和结束时间，但它不是用户交互的。我检查了 wavesurfer.js，它有带波形的音频播放器，但找不到任何示例或事件处理程序来选择音频开始和结束时间。

【参考方案1】：

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>