Estoy tratando de proporcionar audio a la plantilla HTML Django, originalmente lo intenté así:
<audio id="audio" src="{{audio_path}}" controls></audio>Esto fue suficiente para que el audio se reprodujera en el sitio web con pausa/reproducción, aumento/disminución de la velocidad, aumento/disminución del volumen, pero el usuario no pudo mover la barra de progreso en absoluto, se congeló o volvió a la posición inicial.
Investigué mucho y encontré muchas cosas que decían habilitar la búsqueda/depuración, pero ninguna de ellas funcionó. Actualmente mi código es el siguiente, primero la vista de la API de audio:
class AudioFetchView(View): def get(self, request, audio_id, *args, **kwargs): audio_file = UploadAudio.objects.get(pk=audio_id) response = StreamingHttpResponse(content_type='audio/mpeg') response['Content-Disposition'] = 'attachment; filename=%s' % audio_file.path response['Accept-Ranges'] = 'bytes' response['X-Sendfile'] = audio_file.path return response audio_fetch = AudioFetchView.as_view()Luego el HTML:
<audio id="audio" crossOrigin="anonymous" preload="auto" src="{{audio_fetch_url}}"></audio>Ahora el audio no se puede reproducir en absoluto, el mensaje de error es: "DOMException no capturado (en promesa): el elemento no tiene fuentes compatibles".
¿Alguien sabe cómo proporcionar correctamente un archivo .mp3 a la interfaz de una manera que permita la limpieza/búsqueda?
No tengo idea de por qué funcionó esto, pero mi código ahora funciona así:
class AudioFetchView(View): def get(self, request, audio_id, *args, **kwargs): audio_file = UploadAudio.objects.get(pk=audio_id) with open(audio_file.absolute_path, 'rb') as fh: response = HttpResponse(fh.read(), content_type='audio/mpeg') response['Content-Disposition'] = 'attachment; filename=%s' % audio_file.path response['Accept-Ranges'] = 'bytes' response['X-Sendfile'] = audio_file.path response['Content-Length'] = os.path.getsize(audio_file.absolute_path) return response audio_fetch = AudioFetchView.as_view()HTML:
<audio id="audio" src={{audio_fetch_url}} type="audio/mpeg"> </audio>Pensé que publicaría en caso de que alguien encuentre esto en el futuro.