时间戳

首页 > 解决方案 > 满足特定条件时 JavsScript 上的音频

javascript - 满足特定条件时 JavsScript 上的音频

问题描述

我现在正在制作二十一点游戏，我在代码中获取音频时遇到问题，我希望它在满足特定条件时播放音频，我希望它从本地文件中获取音频文件，我也想要它自动播放，我该如何实现？谢谢。

这是我的javascript代码：

//adding the cards together, with parameter passing
function cardNumber(one, two) {
    var cardTotal = one + two;
    alert(`Your card numbers are ${one} and ${two}!`);
    return cardTotal;
}

var cardRange = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var cardOne = cardRange[Math.floor(Math.random() * cardRange.length)];
var cardTwo = cardRange[Math.floor(Math.random() * cardRange.length)];
//calling the cardNumber function (parameter passing shown)
var cardSum = cardNumber(cardOne, cardTwo);

//adding the cards together if the user wants an extra card, with parameter passing
function moreCards(nextCard, total) {
    alert(`Your extra card is ${nextCard}!`);
    var cardTotal = nextCard + total;
    return cardTotal;
}

function inputValidation() {
    var i;
    for (i = 0; i < 3;) {
        //Asks the user if they want another card, they can do this up to three times, depending on their choice and card sum.
        var input = prompt(`Which makes your card total ${cardSum}. Would you like to draw another card? (Type in 1 for yes, 0 for no, or select cancel to return to home.)`);
        if (input === null) {
            //takes you back to pontoonhome.html
            window.location.replace("pontoonhome.html").src = "homepage";
            i += 3;
        }
        //Random number doesn't change
        else if (input === "1") {
            i++;
            var extraCard = cardRange[Math.floor(Math.random() * cardRange.length)];
            //calling the moreCards function
            cardSum = moreCards(extraCard, cardSum);
        }
        else if (input === "0") {
            //If the user declines to another card
            i += 3;
        }
        else {
            //If the user puts in an invalid input
            alert("Wrong input, enter 1 or 0 on your keyboard!");
        }
        if (cardSum >= 22) {
            //If the user gets above 22 (bust)
            i += 3;
        }
    }
}

function pontoonDecision() {
    var comScore = 18;

    if (cardSum >= 22) {
        alert("BUST!");
        document.write(`You got ${cardSum}, which is above 21, that means you got a bust! Therefore, you lose!`);
        document.getElementById("loss").src = "images/dislike-157252_640.png";
    }
    else if (cardSum > comScore && cardSum < 22) {
        document.write(`You got ${cardSum}, and the AI player got ${comScore}, which means you win! <br>`);
        document.getElementById("victory").src = "images/hand-157251_640.png";
        //where I want the audio to play.
        let audio = document.getElementById("winner").src = "audio/winner.wav";
        audio.autoplay();
        //not sure how to do it right
    }
    else if (cardSum === comScore) {
        document.write(`You got ${cardSum}, and the AI player got ${comScore}. Which means it is a tie!`);
        document.getElementById("draw").src = "images/questions-3409194_640.png"
    }
    else {
        document.write(`You got ${cardSum}, and the AI player got ${comScore}. You got a value lower than the computer's score, meaning you lose!`);
        document.getElementById("loss").src = "images/dislike-157252_640.png";
    }
}
inputValidation();
pontoonDecision();

这是我的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <title>Game</title>
    <link rel = "stylesheet" href = "css/styles.css"> 
    <body>
        <div class ="title">
            <h1>Pontoon</h1>
        </div>
        <div class ="hyperlinks">
            <a href="pontoonhome.html" class="button2">Home</a>
            <a href="pontoonrules.html" class="button2">Rules</a>
            <a href="pontoonstart.html" class="button2">Start</a>
            <a href="pontooncontact.html" class="button2">Contact Us</a>
        </div>
        <div class="header">
            <h2>Game</h2>
        </div>
        <img id = "victory"></img>
        <img id = "loss"></img>
        <img id = "draw"></img>
        <audio controls autoplay>
        <audio id = "winner"></audio>
        <!--The audio I want to play^^^-->
        </audio>
        <a href id = "homepage"></a>
        <br>
        <script src = "js/pontoonGame3.js">
        </script>
        <div class = "wrapper">
        <a href="pontoonhome.html" class="button">Exit</a>
        <a href="pontoonstart.html" class="button">Play Again</a>
        </div>
    </body>
</head>
</html>

标签： javascripthtmlfunctionaudio

解决方案

首先，audio在与您的代码相同的位置创建一个文件夹（推荐），然后在此处包含您需要的所有音频

在您的 HTML 中，<audio>为每个音频文件使用标签，确保为它们提供唯一的 ID 以便稍后查询：

<audio src="link-to-your-audio.mp3" id="your-audio"></audio>

在您的脚本中，就像任何其他元素一样，查询所有音频标签

const yourAudio = document.getElementById('your-audio');

要播放音频，请使用.play()或.pause()停止它，如下所示：

yourAudio.play();
yourAudio.pause();

推荐阅读