如何在按钮点击时播放随机声音? JavaScript的

时间:2014-07-05 22:20:13

标签: javascript html button audio

当我按下按钮时,我想播放随机声音。但是当我点击它时会抛出错误:“无法读取属性'播放'的null”。我是否必须在其他地方声明音频变量?还是我拼错了什么?无论如何,到目前为止这是我的代码:

var audio1 = document.getElementById("potato");


function burn1() {
    audio1.play();
}

function burn2() {
    audio1.play();
}

function burn3() {
    audio1.play();
}

function burn4() {
    audio1.play();
}

function burn5() {
    audio1.play();
}

function random() {
    var rand = Math.floor(Math.random() * (5 - 1)) + 1;
    switch(rand) {

        case 1:
            burn1();
            break;
        case 2:
            burn2();
            break;
        case 3:
            burn3();
            break;
        case 4:
            burn4();
            break;
        case 5:
            burn5();
            break;

    }
}

另外,这是我的HTML:

<!doctype HTML>
<html> 

    <head>
        <title>Burn Generator!</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>
        <script type="text/javascript" src="main.js"></script>
        <span id="dummy"></span>
        <button id="burn" onClick="random()">OOOHH BURN!</button>
        <audio id="potato" src="Kalimba.mp3" ></audio>

    </body>

</html>

1 个答案:

答案 0 :(得分:1)

将您的脚本放在HTML的末尾,或使用现成的回调。它确保在您尝试访问时加载音频#custal。现在audio1可能未定义,因为代码运行时元素不存在

 

<head>
    <title>Burn Generator!</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <span id="dummy"></span>
    <button id="burn" onClick="random()">OOOHH BURN!</button>
    <audio id="potato" src="Kalimba.mp3" ></audio>
    <script type="text/javascript" src="main.js"></script>
</body>

或使用

document.addEventListener('DOMContentLoaded', function () {

});

代码