如何从需要基本身份验证的 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 并且应该得到一个音频文件。

但是，并非所有浏览器都支持它，因此我们决定执行以下操作：

而不是授权执行发送 GET 请求的 JS 代码
在 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 类型吗？ 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>

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

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

How to get src from URL which requires basic auth

javascript

xmlhttprequest

basic-authentication

html5-audio