Javascript HowlerJS-音频播放器-错误401(未经授权)
因此,我正在使用Angular 7,我创建了一个使用api的应用程序,我创建了一个http拦截器,我所有的crud功能都很好,http拦截器在技术上为每个请求添加了一个令牌。 所以现在的问题是,当我添加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`, {
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();
});
}