Javascript:无法播放wav文件

Question

基于 StackExchange 的代码，我编写了打开 wav 文件的代码。 wav 文件本身是一个有效的文件，因为它可以与我的 Python 程序一起正常播放。但 javascript 函数不起作用。声音文件与我的 html 文件位于同一文件夹中。

<div id="play_or_pause_or_exit">    
<button onclick="playAudio()" type="button" id="play"       style="display:inline-block;">Play table</button>
<button onclick="pauseAudio()" type="button"  id="pause" style="display:inline-block;">Pause table</button> 
<button onclick="cancelAudio()" type="button"  id="cancel" style="display:inline-block;">Exit tables</button> 

<script>
var audio;

function setupAudio(){
var audio = new Audio('plus1_071016_Alex.WAV');
}

function playAudio(){
    audio.play();
}   

function pauseAudio(){
    audio.pause();
}

function cancelAudio(){
    audio.pause();
sound.currentTime = 0;
}

</script>

</body>
</html>

如有任何帮助，我们将不胜感激。

Answer 1

看看你的脚本的第一行:

var audio;

function setupAudio(){
    var audio = new Audio('plus1_071016_Alex.WAV');
}

您正在使用同名变量将全局变量音频屏蔽到 setupAudio 函数中。这样，辅助函数 playAudio、pauseAudio 和 cancelAudio 将无法访问您的 Audio 对象。我假设在您的代码中的某个位置(样本中未显示)您将调用 setupAudio 函数。

一个快速而真实的脏解决方案:将 var 关键字删除到函数中，瞧:你污染了你的全局环境，但你的代码应该可以工作。

我会遵循稍微不同的路线，使用简单的模块模式:

CSS

我更喜欢将样式放在头部远离元素标签的地方:它们会分散我的注意力

<style>
    #play_or_pause_or_exit > button { display: inline-block; }
</style>

HTML

我已经重新格式化了您的按钮标签，以适应 stackoverflow 上狭窄的文本区域；-P，删除了内联样式并添加了禁用属性，以防止用户在音频准备好之前单击按钮。

<div id="play_or_pause_or_exit">    
    <button onclick="Player.play()" 
            type="button" 
            id="play"
            disabled>Play/Resume table</button>
    <button onclick="Player.pause()" 
            type="button"
            id="pause"
            disabled>Pause table</button> 
    <button onclick="Player.stop()" 
            type="button"
            id="cancel"
            disabled>Exit tables</button> 
</div>

Javascript

我会在正文底部的某个地方放置此脚本:

var Player = (function (audiourl) {

    var audio = new Audio(audiourl);

    [].forEach.call(
        document.querySelectorAll("#play_or_pause_or_exit > button"),
        function(x) {
            x.disabled=false;
        });

    return {
        "play": function() { audio.play(); },   
        "pause": function() { audio.pause(); },
        "stop": function() {
            audio.pause();
            audio.currentTime = 0;
        },
    };
})("plus1_071016_Alex.WAV");

Player 现在是一个 IIFE(立即调用函数表达式)，它创建一个封装音频资源的对象，其中包括播放、暂停和停止控制资源的方法。

请注意，音频 URL 现在位于声明的底部，正如您可能从函数表达式名称中猜到的那样，一旦定义了生成函数，它就会被加载。

全局环境仍然受到污染，但只是被封装了辅助函数和要播放的资源的单个对象所污染。单点访问与四个函数和一个资源变量。