使用 wavesurfer.js,如何在加载波形后创建 AudioContext?
With wavesurfer.js, how can I create an AudioContext AFTER loading the waveform?
我有:
this.wavesurfer = WaveSurfer.create({
container: "#wavesurfer-player",
height: 60,
barWidth: 2,
barHeight: 1, // the height of the wave
barGap: null,
scrollParent: false
});
this.wavesurfer.load(this.url);
this.wavesurfer.on(
"loading",
progress => (this.loadingProgress = progress)
);
this.wavesurfer.on("ready", () => {
let progressBarContainer = document.querySelector(
".progress-bar-container"
);
progressBarContainer.classList.add("animated", "fadeOut");
this.loadingProgress = 100;
this.wavesurfer.un("ready");
progressBarContainer.addEventListener("animationend", () => {
this.hideProgressBar = true;
});
});
this.wavesurfer.on("audioprocess", this.audioprocess);
在 iOS safari
,无法播放。显然,我需要在用户操作后创建一个 AudioContext。所以我可以添加一个带有 click
事件的按钮来触发它。但我希望波形显示负载。
在 IOS 由于安全原因,它不允许播放 onload。用户必须通过一些用户操作来启动音频播放。
在下面找到一个在 safari 浏览器上播放音频的示例
https://code pen.io/entonbiba/pen/WRyxga
我有:
this.wavesurfer = WaveSurfer.create({
container: "#wavesurfer-player",
height: 60,
barWidth: 2,
barHeight: 1, // the height of the wave
barGap: null,
scrollParent: false
});
this.wavesurfer.load(this.url);
this.wavesurfer.on(
"loading",
progress => (this.loadingProgress = progress)
);
this.wavesurfer.on("ready", () => {
let progressBarContainer = document.querySelector(
".progress-bar-container"
);
progressBarContainer.classList.add("animated", "fadeOut");
this.loadingProgress = 100;
this.wavesurfer.un("ready");
progressBarContainer.addEventListener("animationend", () => {
this.hideProgressBar = true;
});
});
this.wavesurfer.on("audioprocess", this.audioprocess);
在 iOS safari
,无法播放。显然,我需要在用户操作后创建一个 AudioContext。所以我可以添加一个带有 click
事件的按钮来触发它。但我希望波形显示负载。
在 IOS 由于安全原因,它不允许播放 onload。用户必须通过一些用户操作来启动音频播放。
在下面找到一个在 safari 浏览器上播放音频的示例
https://code pen.io/entonbiba/pen/WRyxga