javascript - 在用户擦洗音频 javascript 时显示新图像

Question

场景，当用户擦洗一个音频文件时，我想在音频播放器 div 的背景中显示一个新图像。音频文件有不同的图像，有些有 8 个图像，有些有 42 个等等。音频文件具有不同的长度。

我们的长度为:30000 毫秒。我们有音频文件的图像数:13。我们有我们的网址:http://www.foostorage.com/api/image_1.jpg

const duration = 30000
const imageCount = 13
const url = 'http://www.foostorage.com/api/image_1.png'

function renderImage(percentage) {
  const ab = Math.round((percentage / imageCount) * 100);
  const fooImage = url.replace(/poster.*.png/, `poster_${ab}.jpg`);
  return fooImage;
}

百分比来自擦洗位置，例如:0.232 将是 100 中的 23%。

希望我能解释清楚，如果我还没有解释清楚，请随时告诉我

Answer 1

试试这个..

const duration = 30000
const imageCount = 13
const url = 'http://www.foostorage.com/api/image_1.png'

function renderImage(percentage) {
  const ab = Math.round((percentage * imageCount));
  const fooImage = url.replace(/image.*.png/, `poster_${ab}.jpg`);
  return fooImage;
}

// Assuming scrub scale 0-1
console.log(renderImage(0.1325));
console.log(renderImage(0.20));
console.log(renderImage(0.336));
console.log(renderImage(0.85));
console.log(renderImage(1));