HTML录音并保存 Django AJAX|极客教程

HTML录音并保存 Django AJAX

在现代网络应用中，录音功能已经成为了一个常见需求。通过HTML5的录音API，我们可以轻松地在网页中实现录音功能，并将录音文件保存到服务器端。本文将详细介绍如何使用HTML5录音API和Django框架结合使用，并通过AJAX技术将录音文件上传到服务器端保存。

HTML录音

首先，我们需要使用HTML5的录音API来实现在网页中录音功能。以下是一个简单的HTML代码示例，实现了录音、停止录音和播放录音的功能：

<!DOCTYPE html>
<html>
<head>
    <title>录音测试</title>
</head>
<body>
    <button id="startRecording">开始录音</button>
    <button id="stopRecording" disabled>停止录音</button>
    <button id="playRecording" disabled>播放录音</button>
    <audio controls id="audioElement"></audio>

    <script>
        let startRecordingBtn = document.getElementById('startRecording');
        let stopRecordingBtn = document.getElementById('stopRecording');
        let playRecordingBtn = document.getElementById('playRecording');
        let audioElement = document.getElementById('audioElement');

        let mediaRecorder;
        let chunks = [];

        startRecordingBtn.addEventListener('click', async function() {
          const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
          mediaRecorder = new MediaRecorder(stream);

          mediaRecorder.ondataavailable = function(e) {
            chunks.push(e.data);
          }

          mediaRecorder.onstop = function() {
            const blob = new Blob(chunks, { type : 'audio/ogg; codecs=opus' });
            audioElement.src = URL.createObjectURL(blob);
          }

          mediaRecorder.start();
          startRecordingBtn.disabled = true;
          stopRecordingBtn.disabled = false;
        });

        stopRecordingBtn.addEventListener('click', function() {
          mediaRecorder.stop();
          startRecordingBtn.disabled = false;
          stopRecordingBtn.disabled = true;
          playRecordingBtn.disabled = false;
        });

        playRecordingBtn.addEventListener('click', function() {
          audioElement.play();
        });
    </script>
</body>
</html>

运行上述代码，点击”开始录音”按钮开始录音，并且可以点击”停止录音”按钮停止录音。录音完成后，会在页面中显示一个音频播放器，点击”播放录音”按钮可以播放录音文件。

保存录音到服务器端

接下来，我们将学习如何将录音文件上传到服务器端保存。我们使用Django框架作为服务器端，使用AJAX技术将录音文件发送到Django服务器保存。

首先，我们需要在Django项目中创建一个用于保存录音文件的视图函数。以下是一个简单的Django视图函数示例：

# views.py
from django.http import JsonResponse

def save_recording(request):
    if request.method == 'POST' and request.FILES['audio']:
        audio_file = request.FILES['audio']

        with open('recordings/' + audio_file.name, 'wb') as f:
            for chunk in audio_file.chunks():
                f.write(chunk)

        return JsonResponse({'status': 'success'})
    else:
        return JsonResponse({'status': 'error'})

接着，我们需要在前端页面中发送录音文件到Django服务器。以下是一个简单的AJAX示例：

<!DOCTYPE html>
<html>
<head>
    <title>录音上传</title>
</head>
<body>
    <!-- 录音HTML代码省略 -->

    <button id="uploadRecording" disabled>上传录音</button>

    <script>
        let uploadBtn = document.getElementById('uploadRecording');

        uploadBtn.addEventListener('click', function() {
          let formData = new FormData();
          formData.append('audio', blob, 'recording.ogg');

          fetch('http://localhost:8000/save_recording', {
            method: 'POST',
            body: formData
          })
          .then(response => response.json())
          .then(data => {
            if(data.status === 'success') {
              alert('录音上传成功！');
            } else {
              alert('录音上传失败！');
            }
          });
        });
    </script>
</body>
</html>

在上述代码中，我们通过AJAX将录音文件发送到Django服务器的save_recording视图函数中保存。录音文件以FormData形式发送，后端通过request.FILES接收文件并保存到服务器端。

现在，我们已经完成了录音功能的实现和录音文件的保存。通过HTML5录音API和Django框架的结合，我们可以轻松地在网页中实现录音功能，并将录音文件保存到服务器端。