Wavesurfer-jsでオーディオをダウンロードするには、波形のみを読み込み、ユーザーが「再生」をクリックするのを待つ方法はありますか？

Question

私のサーバーでは、オーディオファイルからJSONデータを生成するためにAudiowaveformを使用しています。

フロントエンドでは、以前のJSONデータに基づいて波形を描画するのにWavesurfer-JSを使用します。

問題は、Wavesurfer-JSのダウンロード時に、いつでも音声ファイルをバックグラウンドでダウンロードできることです（ユーザーが再生ボタンを押したときだけでなく）。

Thisです。

これは、凸部である：

<div id="waveform"> 
    <audio id="song" style="display: none" preload="false" src="http://api.soundcloud.com/tracks/45398925/stream?client_id=fa791b761f68cafa375ab5f7ea51927a"></audio> 
</div> 

<script> 
    var wavesurfer = WaveSurfer.create({ 
     container: '#waveform', 
     waveColor: 'grey', 
     backend: 'MediaElement', 
     mediaType:'audio', 
     progressColor: 'red', 
     cursorColor: '#fff', 
     normalize: true, 
     barWidth: 3 
    }); 

    wavesurfer.load(document.querySelector('#song'), ['.$json.']); 
</script> 

だから、基本的に、私はwavesurfer.loadに焦点を当て、ピーク（JSONデータ）から波形を描くと音声をダウンロードしていないだけに、このJavascriptに新しい機能を追加する必要がありますユーザーが再生ボタンを押したときにのみページロード時にファイルを読み込みます。

どうすれば実現できますか？

Answer 1

は、私はそれがすでに曲をロードせずに描くことができます方法を見つけるためにwavesurfer jsのコードの周りにハックする私にしばらく時間がかかった：P

バックエンド変数にピークを設定し、drawBufferを呼び出すには、組み合わせた、トリックをしましたそして、いくつかの再生ボタンのロジックで、我々は次のコードを得ること：

//Create new wavesurfer 
wavesurfer = WaveSurfer.create({ 
    container: '#waveform', 
    backend: 'MediaElement', 
    mediaType:'audio', 
    normalize: true, 
    barWidth: 3 
}); 

//Set song 
wavesurfer.song = "http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.mp3" 

//Set peaks 
wavesurfer.backend.peaks = [0.0218, 0.0183, 0.0165, 0.0198, 0.2137, 0.2888, 0.2313, 0.15, 0.2542, 0.2538, 0.2358, 0.1195, 0.1591, 0.2599, 0.2742, 0.1447, 0.2328, 0.1878, 0.1988, 0.1645, 0.1218, 0.2005, 0.2828, 0.2051, 0.1664, 0.1181, 0.1621, 0.2966, 0.189, 0.246, 0.2445, 0.1621, 0.1618, 0.189, 0.2354, 0.1561, 0.1638, 0.2799, 0.0923, 0.1659, 0.1675, 0.1268, 0.0984, 0.0997, 0.1248, 0.1495, 0.1431, 0.1236, 0.1755, 0.1183, 0.1349, 0.1018, 0.1109, 0.1833, 0.1813, 0.1422, 0.0961, 0.1191, 0.0791, 0.0631, 0.0315, 0.0157, 0.0166, 0.0108]; 

//Draw peaks 
wavesurfer.drawBuffer(); 

//Variable to check if song is loaded 
wavesurfer.loaded = false; 

//Load song when play is pressed 
wavesurfer.on("play", function() { 
    if(!wavesurfer.loaded) { 
     wavesurfer.load(wavesurfer.song, wavesurfer.backend.peaks); 
    } 
}); 

//Start playing after song is loaded 
wavesurfer.on("ready", function() { 
    if(!wavesurfer.loaded) { 
     wavesurfer.loaded = true; 
     wavesurfer.play(); 
    } 
}); 

HTMLから不要な<audio>タグを削除することを確認しますが、ブラウザは、ように見える負荷に、これらのタグ内のすべてのオーディオファイルをダウンロードするように見えるとpreload=falseなどの属性無視される...