所以我正在使用Angular 7,我创建了一个从API使用的应用程序,我确实创建了一个http拦截器,并且我的所有crud功能都工作正常,http拦截器在技术上添加了一个每个请求上的 token 。 所以我遇到的问题是,当我添加 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 ,因为我做了 2 个调用,其中一个来自 httpclient 和 howlerJS,来自 httpclient 的调用有 token ,但第二个调用没有 token ,因此导致错误 -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();
});
}
关于javascript - HowlerJS - 音频播放器 - 错误 401(未经授权),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55256227/