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

Question

快速浏览

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

我有一个S3存储桶，用于存储一些受公众保护的音乐。 使用官方的AWS开发工具包，我可以生成以下网址：

https://d225******.cloudfront.net/song.m4a?Expires=1493381986&Signature=***&Key-Pair-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>

该脚本可以很好地工作（如您在上面的示例中看到的），没有预签名的url，那么如何在AudioAnalyser函数中使用我的预签名的url ？

Answer 1

我已经看到html5视频标签发出了多个请求。 我假设要获取一些元数据，例如播放长度和视频的第一帧用作缩略图。 您可以尝试使用preload属性来防止这种情况。

具体来说，如果剪辑很小，则preload="auto"可能就是您需要的一切。 我认为，如果浏览器必须发出跟踪请求，您将会遇到困难。 这是一些相关信息

我认为可能更可靠地解决此问题的另一种方法是根据需要生成临时凭据。

有关更多信息，请参阅文档：- 请求临时凭证 - 使用临时凭证访问资源

与JS软件包结合使用，以签署诸如双筒望远镜/ aws-sigv4之类的AWS请求或复制在浏览器中执行此操作的其他人。

Answer 2

共享您的浏览器错误消息（如果有）。 这可能与S3存储桶数据的交叉原点相关。