2016-06-18 5 views
0

私は2つの異なるコードを持っていますが、それぞれ独自にうまくいきます。 私はそれらを組み合わせることができましたが、必要な機能が失われました。 本気で、私はしようとしている: 1.ランダムmp3またはwav(リストから) 2. waveurferビジュアルで再生する 3.再生/停止ボタンを表示 4.ダウンロードするリンクコード付きリストが、異なるソース)Javascriptのヘルプ - ランダムなWav/mp3のオーディオ再生波形

私は、これらの問題(あなたがここで見ることができるように持っているの下に - http://writeasongtoday.com/test3/を): 1.テキスト「Objectオブジェクトは、」どこにも 2.再生/停止がないからあると思われます仕事 3.私は上の#4からスリンクラインを削除しなければならなかった、それを実装する方法を見つけることができませんでした

私は間違って何をしているかについての任意のアイデア?前もって感謝します!

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.0.52/wavesurfer.min.js"></script> 
 

 
</head> 
 

 
<body bgcolor="white"> 
 

 

 
<div id="quote"> </div> 
 

 

 
    <div id="waveform"></div> 
 
<script> 
 
\t  (function() { 
 
\t var wavesurfer = WaveSurfer.create({ 
 
    container: '#waveform', 
 
\t waveColor: 'darkorange', 
 
\t progressColor: 'purple', 
 
    barWidth: '1', 
 
    height: '100', 
 
    fillParent: 'true', 
 
    normalize: 'true', 
 
     splitChannels: true, 
 
    pixelRatio: '1' 
 
}); 
 
     var quotes = [ 
 
     { 
 
      qtext: "5", slink: "http://gumroad.com/2" 
 
     }, 
 
     { 
 
\t \t qtext: "7", 
 
      slink: "http://gumroad.com" 
 
     } 
 
     ]; 
 

 
     var quote = quotes[Math.floor(Math.random() * quotes.length)]; 
 
     document.getElementById("quote").innerHTML = 
 
     '<h1>' + quote.qtext + '</h1>' + 
 
wavesurfer.load(quote.qtext + '.wav'), 
 
wavesurfer.on('ready', function() { 
 
    wavesurfer.play(); 
 
    
 
    + '<p><a href="' + quote.slink + ' ">I Want It</a></p>'; 
 

 
});   
 

 
     })(); 
 

 

 

 
</script> 
 

 
    <button class="btn btn-primary" onclick="wavesurfer.playPause(quote.qtext + '.wav')"> 
 
    <i class="glyphicon glyphicon-play"></i> 
 
    Play 
 
    </button> 
 
    
 
</body> 
 
</html>

+0

[オブジェクトのオブジェクト]あなたがinnerHTMLプロパティと波の間に '+'記号を削除し、見出しh1を持つオブジェクトを追加しているため、テキストが来ている.... '負荷 ' – bhansa

+0

@Bhansa、ありがとう!私はそれを取り除き、「物体」は消えた。 :) –

答えて

0
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.0.52/wavesurfer.min.js"></script> 
</head> 

<body bgcolor="white"> 


<div id="quote"> </div> 


    <div id="waveform"></div> 
    <script> 
     (function() { 
    var wavesurfer = WaveSurfer.create({ 
    container: '#waveform', 
    waveColor: 'darkorange', 
    progressColor: 'purple', 
    barWidth: '1', 
    height: '100', 
    fillParent: 'true', 
    normalize: 'true', 
     splitChannels: true, 
    pixelRatio: '1' 
}); 
     var quotes = [ 
     { 
      qtext: "5", slink: "http://gumroad.com/2" 
     }, 
     { 
     qtext: "7", 
      slink: "http://gumroad.com" 
     } 
     ]; 

     var quote = quotes[Math.floor(Math.random() * quotes.length)]; 
     document.getElementById("quote").innerHTML = 
     '<h1>' + quote.qtext + '</h1>' 
    + '<p><a href="' + quote.slink + ' ">I Want It</a></p>'; 
wavesurfer.load(quote.qtext + '.wav'); 
wavesurfer.on('ready', function() { 
    wavesurfer.play(); 

});   

     })(); 



</script> 
    <button class="btn btn-primary" onclick="wavesurfer.playPause(quote.qtext + '.wav')"> 
    <i class="glyphicon glyphicon-play"></i> 
    Play 
    </button> 
    <button class="btn btn-primary" onclick="wavesurfer.pause();">pause</button> 

</body> 
</html> 
関連する問題