Как получить src из URL, который требует базовой аутентификации - PullRequest
Новая
       70

Как получить src из URL, который требует базовой аутентификации

1 голос
/ 07 ноября 2019

В нашем приложении есть следующий HTML-код 

<audio controls="controls" src="http://user:password@server:port/searchapi?command=replay&amp;id=9203732824369002191_2"> Your browser does not support the HTML5 Audio element. </audio>

Он идет по указанному выше URL-адресу и должен получить аудиофайл.

Однако он поддерживается не во всех браузерах,поэтому мы решили сделать следующее:

  1. Вместо этой авторизации выполнить код JS, который отправляет запрос GET
  2. В атрибут src поместить сам файл.

Код выглядит следующим образом: 

var myRequest = new XMLHttpRequest();
myRequest.open('GET', 'server:port/searchapi?command=replay&amp;id=9203732824369002191_2', false);
myRequest.setRequestHeader('Authorization', 'Basic ' + btoa('user:password'));
myRequest.send();

Вопрос в том, как выполнить его на странице во время ее рендеринга? Я имею в виду поместить этот код непосредственно в src имя тега?

Кроме того, есть ли способ динамического определения mime-типа? В ответе он жестко закодирован и обрабатывает изображение, а не аудио. Есть ли разница?

Я написал следующее (без аутентификации): 

<audio id= "audioElement" controls="controls" [src]="getAudio()"> Your browser does not support the HTML5 Audio element. </audio>

<script>
    function getAudio() 
    {

        var oReq = new XMLHttpRequest();
        oReq.open('GET', 'https://upload.wikimedia.org/wikipedia/ru/6/62/Meow.ogg', true);
        oReq.responseType = "arraybuffer";

        oReq.onload = function (oEvent) 
        {
          var arrayBuffer = oReq.response;
          if (arrayBuffer) {
          var u8 = new Uint8Array(arrayBuffer);
          var b64encoded = btoa(String.fromCharCode.apply(null, u8));
          var mimetype="audio/ogg"; 
          document.getElementById("audioElement").src="data:"+mimetype+";base64,"+b64encoded;
          oReq.send(null);
        }
    }
</script>

Но это не работает.

В чем проблема?

Заранее спасибо.

1 Ответ

0 голосов
/ 07 ноября 2019

Что ж, похоже, правильный способ реализации такого поведения заключается в следующем: 

<audio id= "audioElement" controls="controls"> Your browser does not support the HTML5 Audio element. </audio>

<script>

    window.onload = function() 
    {
      var oReq = new XMLHttpRequest();
      oReq.open('GET', 'https://upload.wikimedia.org/wikipedia/ru/6/62/Meow.ogg', true);
      oReq.responseType = "arraybuffer";

      oReq.onload = function (oEvent) 
      {
          var arrayBuffer = oReq.response; 
          if (arrayBuffer) 
          {
            var u8 = new Uint8Array(arrayBuffer);
            var b64encoded = btoa(String.fromCharCode.apply(null, u8));
            var mimetype="audio/ogg"; // or whatever mime type is
            document.getElementById("audioElement").src="data:"+mimetype+";base64,"+b64encoded;
          }
      }
      oReq.send(null);
    }

</script>

Надеюсь, он будет работать и с базовой аутентификацией ...

...