Question

我正在开发一款处理网络音频和波形显示的应用。

对于它，我正在使用一个名为Wavesurfer的库，专门用于此。

我遇到的问题是调用轨道播放的功能。我尝试使用jQuery的.click（）将其放入外部JavaScript脚本中，但它不起作用。

所以，我决定在按钮上尝试onclick（）事件，如下所示：

<div style="text-align: center">
  <button class="btn btn-primary" onclick="wavesurfer.playPause()">
    Play
  </button>
</div>

唯一的变化就是它在控制台中告诉我“waveurfer没有被定义。”但是它仍然被定义，因为它仍在绘制音频的波形！

最奇怪的部分是这个EXACT代码在CodePen!

中正常工作

编辑：以下完整代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.1.2/wavesurfer.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="C:\Users\Ryan\Desktop\wavesurfer.js"></script>
</head>
<body>
<div id="waveform"></div>

<div style="text-align: center">
  <button class="btn btn-primary" onclick="wavesurfer.playPause()">
Play
  </button>
</div>
</body>
</html>

和JavaScript：

$(document).ready(function(){
var wavesurfer = WaveSurfer.create({
    container: '#waveform',
    waveColor: 'red',
    progressColor: 'purple'
});
wavesurfer.load('https://archive.org/download/Metallica_37/Metallica-MasterOfPuppets.mp3');

});

Answer 1

可变范围

您遇到的问题是范围之一。

什么是范围

javascript中的所有变量都有一个范围。如果变量超出范围，则无法访问该变量。对于使用var标记声明的变量，它们的作用域是声明它们的函数。在任何函数外部声明的变量都具有全局作用域。全局范围意味着变量可以从页面的任何位置进行访问。

实施例

var myGlobal = 10; // this is outside any function and is global
function myFunction(){
    var myFuncLoc = 20;  // this is inside the function and scoped to the function
    console.log(myFuncLoc); // >> 20  // is in scope can be displayed
    console.log(myGlobal); // >> 10  // is in scope can be displayed
    function(){
        var myFuncLoc1 = 30;
        console.log(myFuncLoc); // >> 20  // is in scope can be displayed
        console.log(myFuncLoc1); // >> 30  // is in scope can be displayed
        console.log(myGlobal); // >> 10  // is in scope can be displayed
    }
    console.log(myFuncLoc); // >> 20  // is in scope can be displayed
    console.log(myGlobal); // >> 10  // is in scope can be displayed
    // next is out of scope
    console.log(myFuncLoc1); // Throws ReferenceError: myFuncLoc1 is not defined
}
console.log(myGlobal); // >> 10  // is in scope can be displayed
    // next is out of scope
console.log(myFuncLoc); // Throws ReferenceError: myFuncLoc is not defined
console.log(myFuncLoc1); // Throws ReferenceError: myFuncLoc1 is not defined

这是一个简短的概述，并且还有带有标记let和const的块范围变量声明。块是{ }内的所有内容你应该阅读因为这是几乎所有编程语言的重要概念。

有什么问题

所以你的问题是你有一个超出范围的变量。

$(document).ready(function(){
    // wavesurfer is scoped to this function only
    // and can not be seen in the global scope.
    var wavesurfer = WaveSurfer.create({
        container: '#waveform',
        waveColor: 'red',
        progressColor: 'purple'
    });
    wavesurfer.load('https://archive.org/download/Metallica_37/Metallica-MasterOfPuppets.mp3');

});

onclick在全局范围内，无法看到已在函数范围内声明的变量。

<!-- can not see wavesurfer -->
<button class="btn btn-primary" onclick="wavesurfer.playPause()">

黑客修复。

要解决此问题，您可以确保waveurfer是全局的

// outside any function
var wavesurfer; // declares wavesurfer as a globally scoped variable

$(document).ready(function(){
    // wavesurfer is global
    // so do not use the var token be cause if you do then you create a second
    // variable called wavesurfer inside this function
    wavesurfer = WaveSurfer.create({  
        container: '#waveform',
        waveColor: 'red',
        progressColor: 'purple'
    });
    wavesurfer.load('https://archive.org/download/Metallica_37/Metallica-MasterOfPuppets.mp3');

});

这将解决您的问题

首选修复

更好的解决方案是在waveurfer具有范围的地方添加onclick事件，这样可以避免污染全局范围。

更改按钮

<!-- remove the onclick from the play button and give it an id-->
<button class="btn btn-primary" id='playButton'>

然后是代码

$(document).ready(function(){
    // function scope wavesurfer
    var wavesurfer = WaveSurfer.create({  
        container: '#waveform',
        waveColor: 'red',
        progressColor: 'purple'
    });

    wavesurfer.load('https://archive.org/download/Metallica_37/Metallica-MasterOfPuppets.mp3');

    // use only one of the following code lines

    // add the click event where wavesurfer has scope.
    playButton.addEventListener("click",function(){wavesurfer.playPause()});

    // for the purists :P
    document.getElementById("playButton").addEventListener("click", function(){wavesurfer.playPause()});

});

Answer 2

您需要导入Waveform AJAX库＆amp;头部引导为

<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.1.2/wavesurfer.min.js"></script>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

然后将waveurfer对象作为

var wavesurfer = WaveSurfer.create({
    container: '#waveform',
    waveColor: 'grey',
    progressColor: '#ff7700',
});

// Song Goes Here!
wavesurfer.load('https://archive.org/download/Metallica_37/Metallica-MasterOfPuppets.mp3');

然后您的代码看起来像

<div style="text-align: center">
  <button class="btn btn-primary" onclick="wavesurfer.playPause()">
    Play
  </button>
</div>

播放歌曲Metallica - Master of Puppets

Answer 3

这是一个新的codePen

问题是什么？

您需要将wavesurfer.js源（从CDN）添加到codePen：

//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.0.52/wavesurfer.min.js

waveuffer.js如何逐步运作？ （来自documentation）

1 - 创建一个容器：

<div id="waveform"></div>

2 - 创建一个waveurfer实例：

var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'violet',
progressColor: 'purple'
});

3加载音频：

 wavesurfer.load('audio.wav');

如何在外部调用javascript库函数？

3 个答案:

可变范围