工作示例

Question

在OS X音频播放器应用程序Bowtie中有一个名为Passed的主题，它显示歌曲标题，进度条是标题上的简单水平颜色变化。见这里：http://rhyguy.deviantart.com/art/Passed-185291024

开始＆amp;只需单击标题本身即可完成停止。你无法寻求。

我主要做PHP＆amp; CSS，但我有很少的Javascript经验。我想知道是否以及如何在一个带有Javascript＆amp;的网页上实现这一点。 CSS，或者在那里存在类似的东西。欢迎任何想法。

感谢。

Answer 1

你可以这样做：

创建一个canvas元素，在其中将文本和进度条呈现为
动态创建一个Audio元素并设置其preload和src属性
- 当音频准备播放（canplay事件）时，文字会呈现，画布会点击
单击画布时，启动音频和渲染循环
- 渲染循环清除画布，以一种颜色重绘文本
- 条形循环使用合成在文本顶部绘制白条
再次单击画布时，音频暂停并循环停止

一个警告：

画布需要适当调整大小。要执行此操作，您可以如下呈现文本，然后获取文本的宽度，猜测高度（因为此时没有可用的信息）并设置画布大小。但是，这将清除画布，因此需要重新呈现文本。出于这个原因，最好还动态创建画布，并在渲染大小和文本时将其插入DOM。

工作示例

免责声明：所使用的音乐版权归我所有，可以免费用于测试目的。

var url = "https://epistemex.github.io/particlejs/demos/audio/pvp_colibris.mp3",
    audio = document.createElement("audio"),         // create audio element
    progbar = document.getElementById("progbar"),    // progress bar for demo
    canvas = document.createElement("canvas"),       // clickable canvas (play/pause)
    ctx = canvas.getContext("2d"),
    title = "KEN FYRSTENBERG - COLIBRIS",
    textWidth, inited = false;

// make canvas clickable when audio is ready
audio.addEventListener("canplay", function() {

  if (inited) return;                                // prevent multiple inits...
  inited = true;

  initText();                                        // initial text render
  textWidth = ctx.measureText(title).width;          // get width of text in pixels
  
  // -- solve caveat - set proper canvas size
  canvas.width = textWidth;
  canvas.height = 40;
  initText();
  
  document.body.appendChild(canvas);
  
  canvas.addEventListener("click", function() {     // toggle play/pause clicking title
    if (audio.paused) {
      initText();
      audio.play();
      loop();
    }
    else audio.pause();
  });
});

audio.preload = "auto";
audio.src = url;                                     // load audio

// main animation loop
function loop() {
  drawBar();
  if (!audio.paused && !audio.ended) requestAnimationFrame(loop);
}

// This will clear the canvas and redraw the text
function initText() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.globalCompositeOperation = "source-over";
  ctx.fillStyle = "#ccc";
  ctx.font = "36px impact, sans-serif";
  ctx.textBaseline = "top";
  ctx.fillText(title, 0, 0);
  ctx.globalCompositeOperation = "source-atop";
  ctx.fillStyle = "#fff";
}

// This will composite a white progress bar on the rendered text
function drawBar() {
  var pst = audio.currentTime / audio.duration;
  ctx.fillRect(0, 0, textWidth * pst || 0, canvas.height);
}

body {background:rgb(11,28,52)} canvas {cursor:pointer}

极简主义纯文字音频播放器

1 个答案:

工作示例