HowlerJS - 音频播放器 - 错误 401（未经授权）答案

【问题标题】：HowlerJS - Audio player - Error 401 (unauthorized)HowlerJS - 音频播放器 - 错误 401（未经授权）
【发布时间】：2019-03-20 08:17:00
【问题描述】：

所以我正在使用 Angular 7 并且我创建了一个从 api 消费的应用程序，我确实创建了一个 http-interceptor 并且我所有的 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 音频播放器，任何帮助将不胜感激

【问题讨论】：

标签： javascript angular html html5-audio howler.js

【解决方案1】：

所以，我错了……完全错了，我找到了解决方案，我确实得到了 401，因为我做了 2 个调用，一个来自 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();
            });
}

【讨论】：