在 html5 中使用 javascript/jQuery 制作类似 Soundcoud Player 的波形

Question

我想使用 javascript/jQuery 和 html5 canvas 让音频播放器看起来像 Soundcloud 播放器，波形由 mp3 文件制成。我知道在 Whosebug 上有很多像我这样的问题，但没有人能找到真正的答案...

这是我做的，但不是很好。

        var imgBg = new Image(),
            imgFg = new Image(),
            count = 2;
        imgBg.onload = imgFg.onload = init;
        imgBg.src = "http://www.filetolink.com/605b7afaa1";
        imgFg.src = "https://files.fm/thumb_show.php?i=5ddxxmmn";

        function init() {
          if (--count) return;   // makes sure both images are loaded
          
           var canvas = document.querySelector("canvas"),
               ctx = canvas.getContext("2d"),
               audio =  document.querySelector("audio");
          
          canvas.width = imgBg.naturalWidth;
          canvas.height = imgBg.naturalHeight;
          
          render();
          
          audio.volume = 0.5;
          audio.addEventListener("timeupdate", render);
          
          function render() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(imgBg, 0, 0);
            
            // calc progress
            var pst = audio.currentTime / audio.duration;
            
            // draw clipped version of top image
            if (pst > 0) {
              ctx.drawImage(imgFg, 0, 0, (canvas.width * pst)|0, canvas.height,  // source
                                   0, 0, (canvas.width * pst)|0, canvas.height); // dst
            }
          }
        }

        body {background:#ccc}
        canvas {width:600px;height:auto; background:#CCCCCC}

  <audio src="https://failiem.lv/down.php?i=puupmmqb" controls=""></audio>
  <canvas height="238" width="1470"></canvas>

我已经在网上找到了很多脚本，但没有一个看起来像 soundcloud 播放器。

我在网上找到但与我正在搜索的不完全相同的链接列表：

感谢所有能帮助我的人，也感谢你们的建议。

Answer 1

如果你想像soundcloud那样做，别忘了不管多难你也只是个复制品。将两部分分开。使用波形构建该播放器。其次，让你的光标看起来像一个指针，无论你点击哪里，你都可以 post 根据你在歌曲中的百分比发表评论。对不起，我是法国人，但这样想，我想你会更容易理解你必须做什么！

看看这个：http://preview.codecanyon.net/item/audio-waveform-player-with-playlist/full_screen_preview/18420897?_ga=2.157064376.2056415136.1512709641-883454457.1511933135

在 html5 中使用 javascript/jQuery 制作类似 Soundcoud Player 的波形

Make waveform like Soundcoud Player with javascript/jQuery in html5

html

javascript

jquery

canvas

soundcloud