如何在django聊天应用程序中录制用户音频？

如何解决如何在django聊天应用程序中录制用户音频？

我有一个简单的聊天应用程序，如WhatsApp，但是用户抱怨无法将语音消息录制为WhatsApp或Messenger，我已经搜索了一个多星期，但没有找到任何可以帮助我的东西，我准备好音频模型，但是我不能做的是直接从我的应用程序录制音频，而不是用户必须离开网站来录制音频并将其保存为文件然后发送。 这是我的模型。py

class Message(models.Model):
    chat_box = models.ForeignKey(
        ChatBox,related_name='chat_box',null=True,on_delete=models.CASCADE)
    message_sender = models.ForeignKey(
        User,related_name='message_sender',on_delete=models.CASCADE)
    date = models.DateTimeField(auto_now_add=True)
    message = models.TextField(blank=True,null=True)
    file = models.FileField(
        upload_to='social_group_message_images',blank=True,null=True)
    image = models.ImageField(
        upload_to='social/friend_message_images',null=True)
    audio = models.ImageField(
        upload_to='social/friend_message_audio',null=True)
    video = models.ImageField(
        upload_to='social/friend_message_video',null=True)

我的views.py（我稍后将对其进行更改以使其可与Ajax一起使用）：

def send_friend_file_message(request,pk):
friend = get_object_or_404(User,pk=pk)
friend = get_object_or_404(User,pk=pk)
chat_box = ChatBox.objects.filter(
    user_1=request.user,user_2=friend).first()
if not chat_box:
    chat_box = ChatBox.objects.filter(
        user_1=friend,user_2=request.user).first()

message = Message(chat_box=chat_box,message_sender=request.user,file=request.FILES.get('file'),image=request.FILES.get('image'),video=request.FILES.get('video'),audio=request.FILES.get('audio'))
message.save()
return redirect('social:chat_friend',pk=pk)

最后是发送文档/视频/音频消息的html：

<div class="modal-body">
            <div>
                <!-- Send file -->
                <form action="{% url 'social:send_friend_file_message' friend.id %}" method="post"
                    enctype="multipart/form-data" id="sendFileForm">
                    {% csrf_token %}
                    <input type="file" name="file" id="uploadFile" class="from-file" accept="*">

                    <input type="file" name="image" id="uploadImage" class="from-file" accept="image/*">
                    <input type="file" name="video" id="uploadVideo" class="from-file" accept="video/*"
                        style="display:none;" onchange="document.querySelector('#sendFileForm').submit()">
                    <input type="file" name="audio" id="uploadAudio" class="from-file" accept="audio/*"
                        style="display:none;" onchange="document.querySelector('#sendFileForm').submit()">
                </form>
                <span class="mr-3 btn d-inline" id="displayUploadFile">
                    <i class="far fa-file" style="font-size:24px"></i> Document
                </span>
                <!-- Send image -->
                <span class="btn" id="displayUploadImage">
                    <i class="far fa-image" style="font-size:24px"></i> Image
                </span>
                <!-- Send video -->
                <span class="btn" onclick="document.querySelector('#uploadVideo').click()">
                    <i class="fas fa-video" style="font-size:24px"></i> Video
                </span>
                <!-- Audio -->
                <span class="btn" onclick="document.querySelector('#uploadAudio').click()">
                    <i class="fas fa-headphones-alt" style="font-size:24px"></i> Audio
                </span>
            </div>
        </div>