Play WAV audio file in Edge with Angular/Javascript

问题

I have following code in Angular to playback a uploaded WAV file:

<input #fileImportInput (change)="fileChangeListener($event)" />
<audio #myAudio controls controlsList="nodownload">
  <source src="" />
</audio>

audioElement: HTMLAudioElement;
@ViewChild('myAudio', { static: true }) myAudio: any;

ngOnInit() {
  this.audioElement = this.myAudio.nativeElement;
}

fileChangeListener(files: any): void {
  const inputFile = files.target.files[0];
  if (window.URL && window.URL.createObjectURL) {
    this.audioSrcURL = window.URL.createObjectURL(inputFile);
    this.audioElement.src = this.audioSrcURL;
  }
}

The above works in Chrome and Firefox, but does not work in Edge 44 (18). How can I playback WAV file in Edge?

回答1:

Try to use F12 developer tools to check whether there have some error in Edge browser, and whether the audio source is set successful, if there is no error and the audio resource is set success, try to call the .play() method to playback the audio.

Besides, here is a sample using JavaScript to upload the playback the audio file, you could refer to it:

    <input type="file" id="input" />
    <audio id="sound" controls="controls">
        <source src="" />
    </audio>

    <script type="text/javascript">
         var input = document.getElementById('input');
        input.onchange = function (e) {
            var sound = document.getElementById('sound');
            sound.src = URL.createObjectURL(this.files[0]);
            // not really needed in this exact case, but since it is really important in other cases,
            // don't forget to revoke the blobURI when you don't need it
            sound.onend = function (e) {
                URL.revokeObjectURL(this.src);
            }
        }
    </script>

来源：https://stackoverflow.com/questions/60155376/play-wav-audio-file-in-edge-with-angular-javascript