如何使用 Django 为前端提供 seekable/scrubbable 音频

Question

我正在尝试向 HTML Django 模板提供音频，最初我是这样尝试的：

<audio id="audio" src="{{audio_path}}" controls></audio>

这足以在网站上以 pause/play、速度 up/down、音量 up/down 播放音频，但用户根本无法移动进度条，它要么僵住，要么回到起始位置。

我进行了大量搜索，发现许多声称可以启用 seeking/scrubbing 的东西，但其中 none 确实有效。目前我的代码如下，首先是音频API视图：

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()

然后 HTML:

<audio id="audio" crossOrigin="anonymous" preload="auto" src="{{audio_fetch_url}}"></audio>

现在根本无法播放音频，错误消息是：“未捕获（承诺）DOMException：该元素没有支持的源。”

有谁知道如何以允许 scrubbing/seeking 的方式正确地向前端提供 .mp3 文件？

Answer 1

我不知道为什么会这样，但我的代码现在是这样工作的：

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>

我想我会 post 以防将来有人发现它。

如何使用 Django 为前端提供 seekable/scrubbable 音频

How to provide seekable/scrubbable audio to frontend using Django

html

javascript

python

django

html5-audio