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

Question

我有一个简单的钓鱼“游戏”，需要知道如何在 PHP 语句为真时使用 jQuery 播放 mp3 文件。

jQuery 是

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

但我需要在 if(empty($caught)) { $Output=... 为真时运行它。所以当这是真的，或者当 $Output 被回显时，声音文件会自动播放。

该文件目前确实可以播放，只是当 PHP 语句为真时不会播放。

完整的相关代码如下。我只是不知道如何使它工作。

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

提前感谢您能给我的任何帮助；我很困惑，已经用谷歌搜索了这个问题。

Answer 1

如果满足条件，则可以输出脚本；y

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>";
}