javascript - 如何从需要基本身份验证的 URL 获取 src

Question

在我们的应用程序中，我们有以下 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. 执行发送 GET 请求的 JS 代码，而不是授权
2. 在 src 属性中放置文件本身。

代码如下所示:

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

问题是我们如何在页面渲染时执行它？我的意思是将该代码直接放在 src 标记名称中？

另外，有什么方法可以动态确定 mime-type 吗？ In the answer它是硬编码的，它们处理图像，而不是音频。有区别吗？

我写了以下内容(未经授权):

<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>

但是这不起作用。

有什么问题吗？

提前致谢。

Answer 1

嗯，看来实现这种行为的正确方法如下:

<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>

希望它也能与基本身份验证一起使用......