HowlerJS - Аудио плеер - Ошибка 401 (не авторизовано) - PullRequest
Новая
       16

HowlerJS - Аудио плеер - Ошибка 401 (не авторизовано)

0 голосов
/ 20 марта 2019

, поэтому я работаю с Angular 7 , и я создал приложение, которое использует API, я создал http-перехватчик, и все мои грубые функциональные возможности работают нормально, 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)
});
}

обратите внимание, что мне не нужно работать с ревуном, все, что я пытаюсь сделать, - это воспроизводить звук, даже с помощью аудиоплеера HTML, любая помощь будет оценена

1 Ответ

0 голосов
/ 20 марта 2019

Итак, я был НЕПРАВИЛЬНО ... все неправильно, и я нашел решение, я получил 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();
            });
}
...