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

【问题标题】：Javascript help - audio play waveform of random Wav/mp3Javascript 帮助 - 随机 Wav/mp3 的音频播放波形
【发布时间】：2016-06-18 10:41:07
【问题描述】：

我有 2 个不同的代码，每个代码都可以单独运行。我设法将它们结合起来，但失去了我需要的功能。本质上，我正在尝试： 1. 随机获取 mp3 或 wav（来自列表） 2. 用冲浪者视觉效果玩它 3.显示播放/停止按钮 4. 下载链接（来自相同列表，但来源不同）

使用下面的代码，我遇到了这些问题（如您在此处看到的 - http://writeasongtoday.com/test3/）： 1. 突然出现“Object object”文字 2.播放/停止不起作用 3.我不得不删除slink线（从上面的#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>

【问题讨论】：

[object object] 文本即将出现，因为您要附加标题为 h1 的对象，删除 innerHTML 和 wave 之间的 + 符号......load
@Bhansa，谢谢！我删除了它，“对象”消失了。 :)

标签： javascript html audio

【解决方案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>

【讨论】：