如何用HTML代码在电脑播放audio/amr格式音频文件？

Hey Priti, sorry to hear you’ve hit roadblocks trying to play AMR files in the browser—let’s walk through the most reliable ways to fix this, since AMR isn’t natively supported by most modern browsers.

Option 1: Convert AMR to a Browser-Friendly Format (Recommended) #

This is the simplest and most compatible approach. Browsers universally support formats like MP3, WAV, or OGG, so converting your AMR file first will avoid almost all playback issues.

You can use a tool like FFmpeg to do this via command line:

ffmpeg -i your-file.amr converted-file.mp3

Once converted, you can use the standard HTML5 <audio> tag as usual:

<audio controls>
  <source src="converted-file.mp3" type="audio/mpeg">
  Your browser doesn't support audio playback.
</audio>

Option 2: Use a JavaScript Library to Decode AMR #

If you absolutely need to keep the AMR format (instead of converting), you can use a JavaScript library that decodes AMR files directly in the browser. A popular choice is libamr.js.

Here’s a step-by-step implementation:

1. Download the libamr.js library and add it to your project directory.
2. Use this HTML/JS code to load and play the AMR file:

<!-- Add a native audio control for user interaction -->
<audio id="amrPlayer" controls></audio>

<script src="libamr.js"></script>
<script>
  const audioElement = document.getElementById('amrPlayer');
  let audioContext;
  let audioSource;

  // Load and decode the AMR file
  fetch('your-file.amr')
    .then(res => res.arrayBuffer())
    .then(buffer => {
      // Decode AMR raw data to PCM
      const pcmData = AMR.decode(new Uint8Array(buffer));
      
      // Initialize AudioContext (requires user interaction in most browsers)
      audioContext = new (window.AudioContext || window.webkitAudioContext)();
      
      // Create an audio buffer for the PCM data (AMR is typically 8kHz mono)
      const audioBuffer = audioContext.createBuffer(1, pcmData.length, 8000);
      const channel = audioBuffer.getChannelData(0);
      
      // Convert PCM values to the [-1, 1] range expected by AudioContext
      for (let i = 0; i < pcmData.length; i++) {
        channel[i] = pcmData[i] / 32768;
      }

      // Create a buffer source to play the audio
      audioSource = audioContext.createBufferSource();
      audioSource.buffer = audioBuffer;
      audioSource.connect(audioContext.destination);

      // Tie playback to the native audio control
      audioElement.addEventListener('play', () => {
        // Resume audio context if it was suspended
        if (audioContext.state === 'suspended') {
          audioContext.resume();
        }
        audioSource.start();
      });
    })
    .catch(err => console.error('Failed to load AMR file:', err));
</script>

Notes for this method: #

• Most browsers block AudioContext initialization until the user interacts with the page (like clicking a button), so the play button interaction here is necessary.
• The library will add some extra weight to your project, so only use this if conversion isn’t an option.

Final Recommendation #

Stick with converting to MP3/OGG if you can—it’s faster, more reliable, and doesn’t require extra code. The JS library method works for edge cases, but comes with more compatibility hoops to jump through.

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