在标签中交<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);