PHP / jQuery-PHP语句为true时如何使用jQuery播放mp3音频文件

Question

I have a simple fishing 'game' and need to know how to play an mp3 file using jQuery when a PHP statement is true.

The jQuery is

<script>
    $(document).ready(function() {
        var audioElement = document.createElement('audio');
        audioElement.setAttribute('src', 'audio/TEST.mp3');
        audioElement.setAttribute('autoplay', 'autoplay');
        //audioElement.load()

        $.get();

        audioElement.addEventListener("load", function() {
            audioElement.play();
        }, true);

        $('.play').click(function() {
            audioElement.play();
        });

        $('.pause').click(function() {
            audioElement.pause();
        });
    });
</script>

but I need that to run when if(empty($caught)) { $Output=... is true. So when that's true, or when $Output is echoed, the sound file autoplays.

The file does play at the moment, just not when that PHP statement is true.

The full relevant code is below. I just dont know how to make that work.

<form action="fishing.php" method="post">
<?php
$fish = array('' => '', 'coelacanth.gif' => 'coelacanth', 'seadragon.gif' => 'sea dragon', 'rainbow_trout.gif' => 'rainbow trout', 'dolphinfish.gif' => 'dolphinfish', 'catfish.gif' => 'catfish', 'monkfish.gif' => 'monkfish', 'lmbass.gif' => 'large-mouth bass', 'smbass.gif' => 'small-mouth bass', 'shiner.gif' => 'shiner', 'perch.gif' => 'perch', 'frogfish.gif' => 'frogfish', 'pickerel.gif' => 'pickerel', 'minnow.gif' => 'minnow', 'flying_fish.gif' => 'flying fish', 'clownfish.gif' => 'clownfish', 'tropical_fish.gif' => 'tropical fish', 'betta.gif' => 'betta', 'shark.gif' => 'shark', 'octopus.gif' => 'octopus', 'koi.gif' => 'koi', 'sunfish.gif' => 'sunfish');
$rand = array_rand($fish);

$Caught = $fish[$rand];
$Output = '';

if(empty($Caught)){
    $Output = 'Uh-oh, looks like that one got away!';
    echo $Output;
} else {
    echo '<li class="fish_pic"><img src="img/'.$rand.'" alt="'.$fish[$rand].'" title="'.$fish[$rand].'" class="fish"></li>'."\n";
    echo '<p class="caught">' . "Nice one! You caught a " . $fish[$rand] . "!</p>";
    }
?>
</p>
<p><input type="submit" class="btn btn-primary" value="Go Fishing!"></p>
</form>

<div class="clearfix"></div>
</div><!-- close .starter-template -->
</div><!-- /.container -->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

<script>
    $(document).ready(function() {
        var audioElement = document.createElement('audio');
        audioElement.setAttribute('src', 'audio/TEST.mp3');
        audioElement.setAttribute('autoplay', 'autoplay');
        //audioElement.load()

        $.get();

        audioElement.addEventListener("load", function() {
            audioElement.play();
        }, true);

        $('.play').click(function() {
            audioElement.play();
        });

        $('.pause').click(function() {
            audioElement.pause();
        });
    });
</script>

Thanks in advance for any help you can give me; I'm baffled and have googled the dickens out of this.

Answer 1

You can output the script on;y if the condition is met

if(empty($Caught)){
    $Output = 'Uh-oh, looks like that one got away!';
    echo $Output;
?>
<script>
    $(document).ready(function() {
        var audioElement = document.createElement('audio');
        audioElement.setAttribute('src', 'audio/TEST.mp3');
        audioElement.setAttribute('autoplay', 'autoplay');
        //audioElement.load()

        $.get();

        audioElement.addEventListener("load", function() {
            audioElement.play();
        }, true);

        $('.play').click(function() {
            audioElement.play();
        });

        $('.pause').click(function() {
            audioElement.pause();
        });
    });
</script>
<?php
} else {
    echo '<li class="fish_pic"><img src="img/'.$rand.'" alt="'.$fish[$rand].'" title="'.$fish[$rand].'" class="fish"></li>'."\n";
    echo '<p class="caught">' . "Nice one! You caught a " . $fish[$rand] . "!</p>";
}