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

Question

我有一个简单的钓鱼“游戏”，当PHP语句为true时，需要知道如何使用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 = ...为true时运行。 因此，当这是真的时，或者在回显$ Output时，声音文件会自动播放。

该文件会在当前播放，而不是在该PHP语句为true时播放。

完整的相关代码如下。 我只是不知道该怎么做。

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