audio - Javascript: can't play wav file

Based on code from StackExchange, I've witten code to open a wav file. The wav file itself is a valid file, because it plays properly with a Python program I have. But the javascript functions don't work. The sound file is located in the same folder as my html file.

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

Any help would be appreciated.

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

Any help would be appreciated.

Share Improve this question asked Jun 22, 2017 at 23:46 Owen Walker 751 gold badge2 silver badges9 bronze badges

Do you have a link? – Jared Farrish Commented Jun 23, 2017 at 0:00
because of the var keyword inside the setupAudio function, this AudioElement will be declared only in the scope of this function, and then inaccessible to anyone. Remove this keyword if you want to populate the global audio variable. – Kaiido Commented Jun 23, 2017 at 1:32

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

You do not have an entry point ... what is calling your setupAudio() ? this will get you up and running

<html>
<head>
<title>Test</title>
</head>
<body>
<script>

 // var audio = new Audio("plus1_071016_Alex.WAV");
 // var audio = new Audio("http://glpjt.s3.amazonaws./so/av/a12.mp3");                 

 var audio = new Audio("https://s3.amazonaws./audio-experiments/examples/elon_mono.wav");
		
function playAudio() {
    audio.play();
}   

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

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

</script>
   	<body>
<div id="play_or_pause_or_exit">    
<button onclick="playAudio()" type="button" id="play" style="display:inline-block;">Play/Resume 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> 

</body>
</html>

Look at the first lines of yout script:

var audio;

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

You are masking the global variable audio with a variable with the same name into the setupAudio function. In this way your Audio object will be not accessible to the helper functions playAudio, pauseAudio and cancelAudio. I'm assuming that somewhere in your code, not shown in your specimen, you will call the setupAudio function.

A quick and real dirty solution: remove the var keyword into the function and voilà: you polluted your global environment but your code should work.

I would follow a slightly different route, using a simple module pattern:

the css

I prefer to have the styling somewhere in the head away from the element tags: they are distracting to me

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

the HTML

I have reformatted your button tags to adapt to the cramped textarea here on stackoverflow ;-P, removed the inline styling and added a disabled attribute, to prevent the user to click on the buttons before the Audio is ready.

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

the Javascript

Somewhere at the bottom of the body I would put this script:

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 now is a IIFE (Immediately-invoked function expression) that create an object encapsulating your audio resource with play, pause and stop methods to control resource.

Notice the audio url is at the bottom of the declaration now and it is loaded, as you may have guessed from the function expression name, as soon as the generation function is defined.

The global environment is still polluted but just by a single object that encapsulate the helper functions an the resource to play. A single point of access vs four functions and a resource variable.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

audio - Javascript: can't play wav file - Stack Overflow

2 Answers 2

the css

the HTML

the Javascript

与本文相关的文章

评论列表(0)