Javascript HowlerJS-音频播放器-错误401(未经授权)

Javascript HowlerJS-音频播放器-错误401(未经授权),javascript,angular,html,html5-audio,howler.js,Javascript,Angular,Html,Html5 Audio,Howler.js,因此,我正在使用Angular 7,我创建了一个使用api的应用程序,我创建了一个http拦截器,我所有的crud功能都很好,http拦截器在技术上为每个请求添加了一个令牌。 所以现在的问题是,当我添加HowlerJs时,我得到了401错误,我对此进行了研究,但我找不到解决方案。 这是我的密码: public play_audio_file(id: string) { this.httpClient.get(`${this.Url}/${id}/audiofile`, {

因此,我正在使用Angular 7,我创建了一个使用api的应用程序,我创建了一个http拦截器,我所有的crud功能都很好,http拦截器在技术上为每个请求添加了一个令牌。 所以现在的问题是,当我添加HowlerJs时,我得到了401错误,我对此进行了研究,但我找不到解决方案。 这是我的密码:

public play_audio_file(id: string) {
    this.httpClient.get(`${this.Url}/${id}/audiofile`, {
        responseType: "blob",
        headers: {
           'Accept': 'audio/*',
           'Authorization': `Bearer ${this.token}`
        }
   }) 
.subscribe(blob => {
    var sound = new Howl({
        src: `${this.Url}/${id}/audiofile`, 
        format: ['wav'],
    });

    sound.play();
    console.log(sound)
});
} 
请注意,我没有必要使用howler,我只想播放音频,即使使用HTML音频播放器,
任何帮助都将被感激

所以,我错了。。。一路走错了我找到了解决办法, 我确实得到了401,因为我做了两个调用,一个来自httpclient,另一个来自howlerJS,httpclient有令牌,但第二个没有令牌,因此导致了一个错误-401- 因此,我已将代码更改为以下内容:

        public play_audio_file(id: string) {
                var xhr = new XMLHttpRequest();
                var url = `${this.Url}/${id}/audiofile`;
                xhr.open('GET', encodeURI(url), true);
                xhr.setRequestHeader('Authorization', `Bearer ${this.token`);
                xhr.responseType = 'blob';
                xhr.onload = function (evt) {
                    var blob = new Blob([xhr.response], { type: 'audio/*' });
                    var objectUrl = URL.createObjectURL(blob);

                    var sound = new Howl({
                        src: objectUrl, 
                        format: ['wav'],
                    }); 
                    sound.play();
                //OR with web audio API
                    // var audio = new Audio();
                    // audio.src = objectUrl; 
                    // audio.onload = function (evt) {
                    //  URL.revokeObjectURL(objectUrl);
                    // };
                    // audio.play();
                };
        xhr.send(); 
    } 
或者更好地使用HttpClient:

public play_audio_file(id: string) {
        this.httpClient.get(`${this.Url}/${id}/audiofile`, { responseType: "blob", headers: { 'Accept': 'audio/*' } })
            .subscribe(blob => {
                var objectUrl = URL.createObjectURL(blob); 
                var sound = new Howl({
                        src: objectUrl, 
                        format: ['wav'],
                    }); 
                    sound.play();
                //OR with web audio API
                    // var audio = new Audio();
                    // audio.src = objectUrl; 
                    // audio.onload = function (evt) {
                    //  URL.revokeObjectURL(objectUrl);
                    // };
                    // audio.play();
            });
}