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

Question

快速浏览

I'm using Sketch.js plugin in this example. I would like to use my pre-signed urls as well but they don't work. Expiration time is set long enough (1 day) so there's something wrong with the JS itself.

我有一个 S3 存储桶，用于存储一些受公共(public)保护的音乐。 使用官方 AWS SDK 我可以生成如下 url:

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" 可能就是您需要的一切。如果浏览器必须发出后续请求，我认为你会遇到困难。 Here's some relevant info

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

有关更多信息，请参阅文档: - Requesting temp creds - Accessing resources with temp creds

结合 JS 包来签署 AWS 请求，如 binoculars/aws-sigv4或 copy someone else谁在浏览器中执行此操作。