Изменение скорости воспроизведения в Wavesurfer на iOS приводит к прерывистому и глючному звуку. ⇐ IOS

[Anonymous]

Описание проблемы
Моя простая настройка, позволяющая пользователю изменять скорость воспроизведения в Wavesurfer, отлично работает на моем компьютере (Chrome, Монтерей) , MacBook Pro), но на моем мобильном телефоне он ломается при доступе к моему веб-сайту — проекту Django, размещенному на Heroku. Звук нормальный, пока я поддерживаю скорость 1,00 x, но изменение этого значения приводит к хаосу: звук становится прерывистым, прерывистым, прерывистым.
Похоже, проблема заключается в манипуляциях с аудиоконтекстом, которые изменяет громкость различных каналов: если в приведенном ниже коде я не вызываю метод ChangeChannelVolume(), изменение скорости воспроизведения не вызовет никаких проблем. Пример скорости, в котором не создается аудиоконтекст, разделитель или слияние, хорошо работает с audioRate, отличным от 1. Опять же, все это относится к моему iPhone, у меня не возникает никаких проблем в браузере на рабочем столе.

• Не имеет значения, передаю ли я «audioRate: 2» в качестве опции создателю Wavesurfer или установлю «audio.playbackRate = 2».
• Не указывая «backend: WebAudio»

Если бы вы помогли мне это исправить, я был бы очень признателен!
ОБНОВЛЕНИЕ: это определенно проблема iOS, на телефоне Android этого не происходит.
Воспроизведение проблемы
На моем iPhone переход на https://wavesurfer.xyz/examples/?webaudio.js и добавление в настройки «audioRate: 2» вызывает то же поведение, что и в моем проекте, при этом все работает на моем компьютере нормально. Аналогичным образом я попробовал audio.playbackRate = 2. Это работает на моем компьютере, но вызывает ту же проблему на моем мобильном телефоне.
Используемый формат аудиофайла
WAV, MP3, FLAC
Система
Chrome, Safari, Firefox, iOS 17.6.1, iPhone 12 mini
Соответствующие фрагменты кода
Если понадобится больше, я буду рад поделиться другими частями кода, но поскольку проблема возникает в одном из официальных примеров, я не думаю, что это необходимо):
const audio = new Audio()
audio.controls = true
// Assuming only one audio file
{% for audio_file in track.get_audio_files %}
audio.src = '{{ audio_file.url }}'
{% endfor %}
const audioContext = new AudioContext()

const waveforms = [
{% for audio_file in track.get_audio_files %}
WaveSurfer.create({
container: '#waveform-{{ forloop.counter }}',
splitChannels: [
{
waveColor: "rgba(255, 255, 255, 0.7)"
},
{
waveColor: "rgba(255, 255, 255, 0.7)"
},
{
waveColor: "rgba(255, 255, 255, 0.7)"
}
],
barWidth: 5,
// Optionally, specify the spacing between bars
barGap: 5,
// And the bar radius
barRadius: 2,
plugins: [regions, hover]
hideScrollbar: false,
media: audio,
audioRate: 1,
normalize: true
})
{% endfor %}
];

function changeChannelVolume(audio) {
const mediaNode = audioContext.createMediaElementSource(audio)

// Create a splitter node that can split into 3 channels
const splitter = audioContext.createChannelSplitter(3);

// Create gain nodes for each channel
const channel1Gain = audioContext.createGain();
const channel2Gain = audioContext.createGain();
const channel3Gain = audioContext.createGain();

// Create a merger node to combine the 3 channels back into the audio stream
const merger = audioContext.createChannelMerger(3);

// Connect the splitter to the gain nodes
splitter.connect(channel1Gain, 0); // First channel
splitter.connect(channel2Gain, 1); // Second channel
splitter.connect(channel3Gain, 2); // Third channel

// Connect the gain nodes to the merger
channel1Gain.connect(merger, 0, 0); // Channel 1 to input 1 of merger
channel2Gain.connect(merger, 0, 1); // Channel 2 to input 2 of merger

// Blend third channel into both left (channel 1) and right (channel 2)
channel3Gain.connect(merger, 0, 0); // Mix channel 3 into the left channel
channel3Gain.connect(merger, 0, 1); // Mix channel 3 into the right channel

// Connect the merger back to the Wavesurfer's output
merger.connect(audioContext.destination);

// Finally, connect the wavesurfer source to the splitter
console.log("Connecting splitter to audio")
mediaNode.connect(splitter)

// Function to update gain based on slider input
function updateGain(gainNode, sliderId) {
const slider = document.getElementById(sliderId);
slider.addEventListener('change', function () {
gainNode.gain.value = parseFloat(this.value);
});
}

// Bind sliders to their respective gain nodes
updateGain(channel1Gain, 'volume-1');
updateGain(channel2Gain, 'volume-2');
updateGain(channel3Gain, 'volume-3');
}






1x




function playbackListener() {
const speeds = [0.25, 0.5, 1, 2, 4]
// Add event listener for the playback rate slider
document.querySelector('input[id="playbackRate"]').addEventListener('input', (e) => {

// Use the slider value as an index for the speeds array
const speed = speeds[e.target.valueAsNumber]
console.log("speed", speed)
document.querySelector('span[id="playbackRate"]').textContent = speed + 'x';

primaryWaveform.setPlaybackRate(speed, true)
primaryWaveform.play();
});
};

playbackListener();


Подробнее здесь: https://stackoverflow.com/questions/789 ... tchy-sound