基于.NET Core 2.0与Angular的学习门户录音上传功能实现咨询

Hey there! Let's break down your question about adding browser-based audio recording to your .NET Core 2.0 + Angular learning portal forum—this is a totally feasible feature with established tech and real-world precedents, so let's dive in.

Frontend (Angular) Implementation: No Plugins Needed #

Modern browsers support native audio recording via the MediaRecorder API—no browser plugins required (which is a huge win, since plugins are increasingly blocked or deprecated). Here's a simplified Angular component snippet to handle core recording and upload:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  template: `
    <button (click)="startRecording()" [disabled]="isRecording">开始录制</button>
    <button (click)="stopRecording()" [disabled]="!isRecording">停止录制</button>
    <audio *ngIf="audioUrl" [src]="audioUrl" controls></audio>
  `
})
export class AudioRecorderComponent {
  isRecording = false;
  mediaRecorder: MediaRecorder | null = null;
  recordedChunks: Blob[] = [];
  audioUrl: string | null = null;

  constructor(private http: HttpClient) {}

  async startRecording() {
    // Request microphone access
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    this.mediaRecorder = new MediaRecorder(stream);
    this.recordedChunks = [];

    // Collect recording data
    this.mediaRecorder.ondataavailable = (event) => {
      if (event.data.size > 0) this.recordedChunks.push(event.data);
    };

    // Handle recording stop and prepare upload
    this.mediaRecorder.onstop = () => {
      const audioBlob = new Blob(this.recordedChunks, { type: 'audio/webm' });
      this.audioUrl = URL.createObjectURL(audioBlob); // Preview the recording
      this.uploadAudio(audioBlob);
    };

    this.mediaRecorder.start();
    this.isRecording = true;
  }

  stopRecording() {
    this.mediaRecorder?.stop();
    this.isRecording = false;
  }

  uploadAudio(blob: Blob) {
    const formData = new FormData();
    formData.append('audioFile', blob, `recording-${Date.now()}.webm`);

    this.http.post('/api/forum/audio-upload', formData)
      .subscribe({
        next: (response) => console.log('Recording uploaded successfully', response),
        error: (err) => console.error('Upload failed', err)
      });
  }
}

Backend (.NET Core 2.0) Handling #

Your .NET Core backend can easily receive and store the recorded audio using IFormFile. Here's a controller snippet to handle the upload:

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System.IO;

[Route("api/forum")]
[ApiController]
public class ForumAudioController : ControllerBase
{
    private readonly IWebHostEnvironment _webHostEnv;

    public ForumAudioController(IWebHostEnvironment webHostEnv)
    {
        _webHostEnv = webHostEnv;
    }

    [HttpPost("audio-upload")]
    public async Task<IActionResult> UploadAudio(IFormFile audioFile)
    {
        if (audioFile == null || audioFile.Length == 0)
            return BadRequest("No audio file provided.");

        // Create storage directory if it doesn't exist
        var uploadDir = Path.Combine(_webHostEnv.WebRootPath, "forum-audios");
        Directory.CreateDirectory(uploadDir);

        // Generate unique filename to avoid conflicts
        var fileName = $"{Guid.NewGuid()}-{audioFile.FileName}";
        var filePath = Path.Combine(uploadDir, fileName);

        // Save the file to disk
        using var stream = new FileStream(filePath, FileMode.Create);
        await audioFile.CopyToAsync(stream);

        // Optional: Save metadata to your database (link to forum post, user, etc.)
        // _dbContext.AudioRecordings.Add(new AudioRecording { FilePath = filePath, PostId = yourPostId });
        // await _dbContext.SaveChangesAsync();

        return Ok(new { FilePath = filePath });
    }
}

Similar Real-World Practices #

This feature is already used across many platforms:

• Forums: Discourse offers official and community-built audio comment plugins that rely on browser-native APIs, letting users leave voice messages instead of text.
• Learning Platforms: Coursera and edX use browser-based audio recording for peer feedback and instructor comments, making it easier for learners to explain complex ideas verbally.
• Support Tools: Tools like Intercom and Zendesk let users record quick audio messages for support tickets, reducing friction compared to typing long explanations.

Should You Abandon the Feature? #

Probably not—here's why:

• Broad Compatibility: All modern browsers (Chrome, Firefox, Edge, Safari 14+) support the MediaRecorder API, so you won't exclude most users.
• Low Friction: Users don't need to install extra software, which boosts adoption.
• User Value: In a learning context, audio recordings are great for natural, quick feedback—especially for topics that are easier to explain verbally.

The only edge case to consider is if your user base relies on very old browsers (e.g., IE11), but since you're using Angular and .NET Core 2.0, your audience is likely on modern tools. You can even add a fallback message for unsupported browsers if needed.

内容的提问来源于stack exchange，提问作者Fredrik Rudberg