Выход анализатора веб -аудио -анализатора зависит от того, как определяется источник аудиоэлемента HTML ⇐ Html

[Anonymous]

Справочная информация
У меня есть этот код для визуализации звука с помощью HTML-холста. Он отлично работает в Safari:

Код: Выделить всё

window.MyNamespace = {} // Easy access to some vars by namespace.

// Some browsers require a user gesture before creating Web Audio API context.
MyNamespace.firstUserGesture = true

MyNamespace.audio = {}

MyNamespace.audio.el = document.getElementById("aud")

MyNamespace.audio.canvasEl = document.getElementById("canvasEl")

function setupCanvas() {
MyNamespace.audio.canvasEl.style.width = "88%"
MyNamespace.audio.canvasEl.style.height = "100px"

// High dpi stuff.
// Controls the chart line stroke thickness.
MyNamespace.audio.canvasEl.width = 500 * 2
MyNamespace.audio.canvasEl.height = 100 * 2

// Get canvas context.
MyNamespace.audio.canvasCtx = MyNamespace.audio.canvasEl.getContext("2d")

// Set stroke color.
MyNamespace.audio.canvasCtx.strokeStyle = "#4285F4"

// Draw twice as thick lines due to high dpi scaling.
MyNamespace.audio.canvasCtx.lineWidth = 2

// Animation reference.
MyNamespace.audio.canvasAnimation = {}

MyNamespace.audio.el.addEventListener('play', () => drawWave())
MyNamespace.audio.el.addEventListener('pause', () => cancelAnimationFrame(MyNamespace.audio.canvasAnimation))
MyNamespace.audio.el.addEventListener('ended', () => cancelAnimationFrame(MyNamespace.audio.canvasAnimation))

let N = 0 // Data count to show.
N = MyNamespace.audio.analyzer.fftSize
MyNamespace.audio.data = new Uint8Array(N)

// Our drawing method
function drawWave() {
MyNamespace.audio.analyzer.getByteTimeDomainData(MyNamespace.audio.data)

const WIDTH = MyNamespace.audio.canvasEl.width
const HEIGHT = MyNamespace.audio.canvasEl.height
const bufferLength = MyNamespace.audio.data.length
const dataArray = MyNamespace.audio.data

// https://github.com/mdn/voice-change-o-matic-float-data/blob/c745ba8b48d7a9b93661ac43da2886633c06f2a7/scripts/app.js#L190
MyNamespace.audio.canvasCtx.fillStyle = 'rgb(255, 255, 255)'
MyNamespace.audio.canvasCtx.fillRect(0, 0, WIDTH, HEIGHT)

var barWidth = (WIDTH / bufferLength) * 2.5
var barHeight
var x = 0

for (var j = 0; j < bufferLength;  j++) {
// 128 means no sound? 128 corresponds to 0? Log indicates so!
// Multiply by 2 to make it more noticable.
barHeight = Math.abs(dataArray[j] - 128) * 2
//console.log('bar height', barHeight)

MyNamespace.audio.canvasCtx.fillStyle = 'rgb(' + Math.floor(barHeight + 66) + ',133,244)'
MyNamespace.audio.canvasCtx.fillRect(x, Math.abs(HEIGHT - barHeight) / 2, barWidth, barHeight)

x += barWidth + 1
}

// Animate
MyNamespace.audio.canvasAnimation = requestAnimationFrame(drawWave)
}
}

function createAudio() {
if (MyNamespace.firstUserGesture) {
// Note: As a consequence of calling createMediaElementSource(),
// audio playback from the HTMLMediaElement will be re-routed into the processing graph of the AudioContext.
// So playing/pausing the media can still be done through the media element API and the player controls.
if ('webkitAudioContext' in window) {
MyNamespace.ctx = new webkitAudioContext()
console.log('webkitAudioContext() is available.')
} else if ('AudioContext' in window) {
MyNamespace.ctx = new AudioContext()
console.log('AudioContext() is available.')
} else {
console.log('Web Audio API is not available.')
}

MyNamespace.audio.source = MyNamespace.ctx.createMediaElementSource(MyNamespace.audio.el)
MyNamespace.audio.analyzer = MyNamespace.ctx.createAnalyser()
MyNamespace.audio.source.connect(MyNamespace.audio.analyzer)
MyNamespace.audio.source.connect(MyNamespace.ctx.destination)
console.log('Web Audio API is all set')
// We are sure Web Audio API context is ready.
setupCanvas()
}
MyNamespace.firstUserGesture = false
}

function handleClick() {
// The AudioContext is not allowed to start before user gesture.
// It must be resumed (or created) after a user gesture on the page.
createAudio()

// Play/pause the media
if (MyNamespace.audio.el.paused) {
MyNamespace.audio.el.play()
} else {
MyNamespace.audio.el.pause()
}
}

MyNamespace.audio.btnEl = document.getElementById("btn")
MyNamespace.audio.btnEl.addEventListener('click', handleClick)

Код: Выделить всё

Play/pause






Your browser does not support the vedio tag.

Проблема:
Шоу Safari визуализация холста с этим источником звука:

Код: Выделить всё

< /code>
Но когда я размещаю тот же аудиофайл в публичное место и обслуживаю его статически, как это, как аудио -источник: < /p>

< /code>
... Аудио воспроизводится, но визуализация холста не показана. Из -за того, что вывод узла API Web Audio Api - все 128 

и не изменяется. Это означает, что узел анализатора не ничего не выводит. http.server на моей машине.
Вопрос
Только браузер Safari показывает различное поведение для этих двух, почему?

Код: Выделить всё

< /code>

случайное наблюдение
в случае play/ Пауза кнопка иногда запускает звук с самого начала. Я имею в виду, он не выбирает звук, где он остановился. Он просто перезагружает звук.
Но с другим источником play/pause ведет себя как ожидалось.
the Выше случайное наблюдение сопровождается такой сетевой связи:


Подробнее здесь: https://stackoverflow.com/questions/700 ... -source-is