Cuando trabajo con etiquetas <audio> , generalmente configuro preload="metadata" para reducir el ancho de banda. Aún así, esto desencadena una solicitud en la carga de la página porque el navegador recupera la duración del archivo.
¿Hay alguna manera de establecer la duración de una etiqueta <audio> a través de un atributo? De esa manera, no se necesitaría ninguna solicitud para que el navegador muestre la duración antes de iniciarlo. Algo como:
<audio src="myfile.mp3" duration="600" preload="none">Por lo que 600 serían segundos.
Esto se puede lograr configurando audio.src con bytes para un archivo de audio "vacío". Por ejemplo, se podría crear un archivo RIFF/WAV para la duración requerida y el navegador muestra el tiempo de duración en la interfaz de usuario.
document.querySelectorAll('audio[data-duration]').forEach(initAudio) function initAudio(audio) { // 0s 8-bit Mono Linear PCM 8000Hz WAV header const sampleRate = 8000 const wavHeader = new Uint32Array([1179011410, 36, 1163280727, 544501094, 16, 65537, sampleRate, sampleRate, 524289, 1635017060, 0]) const { duration, url } = audio.dataset // PCM8 WAV data const wavData = new Uint8Array(Math.ceil(duration * sampleRate)) const dataSize = wavData.byteLength // set sizes wavHeader.set([dataSize + 36], 1) wavHeader.set([dataSize], 10) audio.src = URL.createObjectURL(new Blob([wavHeader, wavData])) // swap audio with url to play audio.addEventListener('play', () => { audio.src = url audio.play() }, { once: true }) } <audio controls data-duration="15.13" data-url="https://opus-bitrates.anthum.com/audio/music-96.opus" />