如何解决能够选择音频播放器的起点和终点
我想要一个音频播放器,其前端具有波形,并且能够选择音频播放器上的起点和终点,并将这些点发送到后端以修整音频。另外,如果我可以在音频播放器上拖动这些点以选择特定的部分,那就太好了。
预先感谢
解决方法
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。