javascript - 喜马拉雅fm的波形图和音乐控制器是如何实现的

Question

喜马拉雅fm的波形图和音乐控制器是如何实现的？

代码能找到，但是无法单独运行，怎么进行前端实现，不是后端。包括展示的方法和wave数据的制作

http://www.ximalaya.com/3323077/album/249689

音频数据文件：
http://fdfs.xmcdn.com/group14/M02/47/DA/wKgDY1cQrGGD5CLEAAAKx91hoog1500.js

不知道上面的音频文件是如何生成的？如何显示出来的？js代码太多，剥离不干净

<script src="http://s1.xmcdn.com/js/lib/soundmanager2/20130512/soundmanager2.js?v=20160408144757"></script>
<script type="text/javascript">
function isPit(){
    var ug = navigator.userAgent;
    var pits = /2345|theworld/;
    if(ug.indexOf("MSIE")< 0){
        return false;
    }
    return pits.test(ug);
}
 
var preferFlash = !/mac os/i.test(navigator.userAgent);
if(navigator.userAgent.match(/Chrome\/(\d+)\./)){
   var version = navigator.userAgent.match(/Chrome\/(\d+)\./)[1];
   if(version>=43){
        preferFlash = false;
   } 
}
 
soundManager.setup({
url: config.STATIC_PATH + "/cdnswf/20130512/",
flashVersion:9,
flashPollingInterval:500,
html5PollingInterval:500,
flashLoadTimeout:20000,
useHighPerformance:true,
debugMode:false,
preferFlash: preferFlash,
noSWFCache: isPit(),
defaultOptions : {
  autoLoad: false,        // enable automatic loading (otherwise .load() will call with .play())
  autoPlay: false,        // enable playing of file ASAP (much faster if "stream" is true)
  from: null,             // position to start playback within a sound (msec), see demo
  loops: 1,               // number of times to play the sound. Related: looping (API demo)
  multiShot: false,       // let sounds "restart" or "chorus" when played multiple times..
  multiShotEvents: false, // allow events (onfinish()) to fire for each shot, if supported.
  onid3: null,            // callback function for "ID3 data is added/available"
  onload: null,           // callback function for "load finished"
  onstop: null,           // callback for "user stop"
  onfinish: null,         // callback function for "sound finished playing"
  onpause: null,          // callback for "pause"
  onplay: null,           // callback for "play" start
  onresume: null,         // callback for "resume" (pause toggle)
  position: null,         // offset (milliseconds) to seek to within downloaded sound.
  pan: 0,                 // "pan" settings, left-to-right, -100 to 100
  stream: true,           // allows playing before entire file has loaded (recommended)
  to: null,               // position to end playback within a sound (msec), see demo
  type: null,             // MIME-like hint for canPlay() tests, eg. 'audio/mp3'
  usePolicyFile: false,   // enable crossdomain.xml request for remote domains (for ID3/waveform access)
  volume: 100,            // self-explanatory. 0-100, the latter being the max.
  whileloading: null,     // callback function for updating progress (X of Y bytes received)
  whileplaying: null      // callback during play (position update)
}
});
</script>
 
 
 
<script src="http://s1.xmcdn.com/js/almond.js?v=20160408144757"></script>

Answer 1

剥离代码不好实现，不如使用其他方法：http://wavesurfer-js.org/ 在前端使用HTML5的特性来绘制声波