Question

我有两个不同的代码，每个代码都可以自行运行。我已经设法将它们组合在一起，但失去了我需要的功能。从本质上讲，我试图： 1.抓一个随机的mp3或wav（从列表中） 2.使用waveurfer visual进行播放 3.显示播放/停止按钮 4.下载链接（来自相同列表，但来源不同）

使用下面的代码，我遇到了这些问题（正如您在此处看到的那样 - http://writeasongtoday.com/test3/）： 1.无处不在出现“对象对象”文本 2.播放/停止不起作用 3.我不得不删除slink line（来自上面的＃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>
	    (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>' +
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>

Answer 1

<!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>

Javascript帮助 - 随机Wav / mp3的音频播放波形

1 个答案: