Javascript：无法播放wav文件

基于 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>

任何帮助，将不胜感激。

查看脚本的第一行：

var audio;

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

您正在使用同名变量将全局变量 audio 屏蔽到 setupAudio 函数中。这样，辅助函数将无法访问您的 Audio 对象播放音频, 暂停音频 and 取消音频。我假设在您的代码中的某个位置（样本中未显示）您将调用 setupAudio 函数。

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

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

the css

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

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

the 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（立即调用函数表达式），它创建一个封装音频资源的对象play, pause and stop控制资源的方法。

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

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