在 <audio> 标签中交替加载本地文件

Question

我需要将本地音频文件加载到 <audio> 标签中。

我用下面的代码做到了。

让用户选择文件：

<ion-input type="file" (change)="laodLocalFile($event)">

为 <audio> 标签准备：

laodLocalFile(event: any)
{    
  file_url = URL.createObjectURL(event.target.files[0]);
  document.getElementById('audio_file').setAttribute("src", file_url);
}

并按如下方式使用：

<audio id="audio_file" type="audio/mpeg" controls></audio>

我尝试了几个不同的 mp3 文件。它工作了几次，但大多数时候它没有工作，没有任何警告或错误。

可能是什么问题？

Answer 1

您需要使用 domeSanitizer 和 bypassSecurityTrustUrl() 此方法绕过安全性并相信给定值是安全样式 URL，即可以在超链接或 src

中使用的值

constructor(private domSanitizer:DomSanitizer) {    }

在你的方法中： ...

this.mediaSrc = this.domSanitizer.bypassSecurityTrustUrl(file_url);

在 <audio> 标签中交替加载本地文件

loading local file in <audio> tag working alternately

html

javascript

audio

ionic-framework

angular