Javascript 草图JS，如何在音频标签上使用AWS预签名URL？

快速查看

我在示例中使用插件。我 我也想使用我的预签名URL，但它们不起作用。 过期时间设置得足够长（1天），因此出现问题 用JS本身

我有一个S3存储桶，在那里我存储一些受公共保护的音乐。 使用官方AWS SDK，我可以生成如下URL：

https://d225******.cloudfront.net/song.m4a？Expires=1493381986&签名=***&密钥对Id=***

我在我的网站上使用预签名URL没有任何问题，但在此脚本中无法工作：

<script>
var ALPHA, AudioAnalyser, COLORS, MP3_PATH, NUM_BANDS, NUM_PARTICLES, Particle, SCALE, SIZE, SMOOTHING, SPEED, SPIN;

MP3_PATH = 'my_presigned_url';

AudioAnalyser = (function() {
  AudioAnalyser.AudioContext = self.AudioContext || self.webkitAudioContext;

  AudioAnalyser.enabled = AudioAnalyser.AudioContext != null;

  function AudioAnalyser(audio, numBands, smoothing) {
    var src;
    this.audio = audio != null ? audio : new Audio();
    this.numBands = numBands != null ? numBands : 256;
    this.smoothing = smoothing != null ? smoothing : 0.3;
    if (typeof this.audio === 'string') {
      src = this.audio;
      this.audio = new Audio();
      this.audio.crossOrigin = "anonymous";
      this.audio.controls = true;
      this.audio.src = src;
    }
    this.context = new AudioAnalyser.AudioContext();
    this.jsNode = this.context.createScriptProcessor(2048, 1, 1);
    this.analyser = this.context.createAnalyser();
    this.analyser.smoothingTimeConstant = this.smoothing;
    this.analyser.fftSize = this.numBands * 2;
    this.bands = new Uint8Array(this.analyser.frequencyBinCount);
    this.audio.addEventListener('canplay', (function(_this) {
      return function() {
        _this.source = _this.context.createMediaElementSource(_this.audio);
        _this.source.connect(_this.analyser);
        _this.analyser.connect(_this.jsNode);
        _this.jsNode.connect(_this.context.destination);
        _this.source.connect(_this.context.destination);
        return _this.jsNode.onaudioprocess = function() {
          _this.analyser.getByteFrequencyData(_this.bands);
          if (!_this.audio.paused) {
            return typeof _this.onUpdate === "function" ? _this.onUpdate(_this.bands) : void 0;
          }
        };
      };
    })(this));

  }

  AudioAnalyser.prototype.start = function() {
    return this.audio.play();
  };

  AudioAnalyser.prototype.stop = function() {
    return this.audio.pause();
  };

  return AudioAnalyser;

})();

Sketch.create({
  particles: [],
  setup: function() {
    var analyser, error, i, intro, j, particle, ref, warning, x, y;
    for (i = j = 0, ref = NUM_PARTICLES - 1; j <= ref; i = j += 1) {
      x = random(this.width);
      y = random(this.height * 2);
      particle = new Particle(x, y);
      particle.energy = random(particle.band / 256);
      this.particles.push(particle);
    }
    if (AudioAnalyser.enabled) {
      try {
        analyser = new AudioAnalyser(MP3_PATH, NUM_BANDS, SMOOTHING);
        analyser.onUpdate = (function(_this) {
          return function(bands) {
            var k, len, ref1, results;
            ref1 = _this.particles;
            results = [];
            for (k = 0, len = ref1.length; k < len; k++) {
              particle = ref1[k];
              results.push(particle.energy = bands[particle.band] / 256);
            }
            return results;
          };
        })(this);
        analyser.start();
        document.getElementById('player-container').appendChild(analyser.audio);
        document.getElementsByTagName("audio")[0].setAttribute("id", "dy_wowaudio"); 
        intro = document.getElementById('intro');
        intro.style.display = 'none';
      } catch (_error) {
        error = _error;
      }
    }
  }
});
// generated by coffee-script 1.9.2
</script>

var ALPHA、音频分析仪、颜色、MP3_路径、NUM_波段、NUM_粒子、粒子、比例、大小、平滑、速度、旋转；
MP3_路径='my_presigned_url'；
音频分析器=（函数（）{
AudioAnalyzer.AudioContext=self.AudioContext | | self.webkitAudioContext；
audioanalyzer.enabled=audioanalyzer.AudioContext！=null；
功能音频分析仪（音频、数字、平滑）{
var-src；
this.audio=audio！=null？audio:new audio（）；
this.numBands=numBands！=null？numBands:256；
this.smoothing=平滑！=null？平滑：0.3；
if（this.audio的类型==='string'）{
src=this.audio；
this.audio=新音频（）；
this.audio.crossOrigin=“匿名”；
this.audio.controls=true；
this.audio.src=src；
}
this.context=新的AudioAnalyzer.AudioContext（）；
this.jsNode=this.context.createScriptProcessor（2048,1,1）；
this.analyzer=this.context.createAnalyzer（）；
this.analyzer.smoothingTimeConstant=this.smoothing；
this.analyzer.fftSize=this.numBands*2；
this.bands=新UINT8阵列（this.analyzer.frequencyBinCount）；
this.audio.addEventListener（'canplay'），（函数（\u this）{
返回函数（）{
_this.source=_this.context.createMediaElementSource（_this.audio）；
_本源连接（本分析仪）；
_this.analyzer.connect（_this.jsNode）；
_this.jsNode.connect（_this.context.destination）；
_this.source.connect（_this.context.destination）；
返回_this.jsNode.onaudioprocess=function（）{
_本分析仪获得的频率数据（_本频带）；
如果（！\u此音频已暂停）{
返回类型为_this.onUpdate==“function”？_this.onUpdate（_this.bands）：void 0；
}
};
};
})(本);；
}
audioanalyzer.prototype.start=函数（）{
返回此.audio.play（）；
};
audioanalyzer.prototype.stop=函数（）{
返回此.audio.pause（）；
};
返回式音频分析仪；
})();
草图。创建({
粒子：[]，
设置：函数（）{
var分析仪，误差，i，简介，j，粒子，参考，警告，x，y；
对于（i=j=0，ref=NUM_PARTICLES-1；j我看到html5视频标签发出多个请求。我假设获取一些元数据，如播放长度和用作缩略图的视频的第一帧。您可以尝试使用preload属性来防止这种情况

具体来说，如果剪辑很小，
preload=“auto”
可能是您所需要的一切。如果浏览器必须发出以下请求，我想您将很难接受

我认为另一种更可靠的方法是根据需要生成临时凭证

有关这方面的更多信息，请参阅文档：
- 
-

与JS软件包结合使用，用于签署AWS请求，例如或是谁在浏览器中执行此操作。
共享您的浏览器错误消息（如果有）。这可能与S3 bucket数据的交叉源有关。
您需要在某个地方找到一条错误消息……可能在HTTP响应头中。@Michael sqlbot从控制台我得到
取消捕获（承诺）DOMEException:未能加载，因为找不到支持的源。
从网络选项卡中，我获得
状态代码：206从服务器获取AmazonS3未从Cloudfront中获取问题。
206
表示您只请求并接收了部分内容，这意味着您显然要发出多个请求……这意味着（但不能证明）此请求不是第一个请求，也可能不是最后一个。您将
过期时间设置为多久？如果您禁用对已签名URL的要求，并使同一个存储桶中的对象可以通过CloudFront下载而无需签名，这是否有效？目前尚不清楚这是否确实有效你的意思是，当你说它与“正常URL”一起工作时，@Michael sqlbot Expiration被设置为1天。我可以在另一个页面（在音频标签中）播放这首歌，而无需脚本。这是一个使用正常URL（未预签名）的完整工作。codepen expample不想为我加载。sketch.min.js因“（阻止：混合内容）”而失败。切换到cdnjs托管副本使其正常工作。（）正如我所说，url可以与预签名一起正常工作，此脚本存在问题。从控制台的日志中，我得到了未捕获（承诺）DomeException:未能加载，因为找不到支持的源。确定，这是Promiss异常中的取消拍卖。写入方法autoplay uncompatable browser执行的代码类似于if（playPromise！==undefined）{playPromise.then（function（）{//Automatic playback started！}）。catch（function（错误）{//自动播放失败//显示UI元素以允许用户手动开始播放。}）；}如果（audioanalyzer.enabled）{尝试{}捕获{为手动播放编写相同的代码。}请在此处添加元注释：当您想要帮助但需要更多信息时，最好在原始问题下添加注释。