javascript - 使用 php for 循环中的 javascript 函数播放音频

Question

嗨，我有一个歌曲列表，我正在使用 php 获取它们，我想将此音频传递给 JavaScript 函数。我目前正在使用此函数来播放，但当我单击循环中的另一个音频时，它不会暂停以前的音频，而且当我单击播放按钮时，我的播放类也不会更改为暂停

function play(src){    
var myaudio = new Audio(src);
var isPlaying = false;
myaudio.loop = true;
function play(){

if (isPlaying) {
myaudio.pause()

var target = document.getElementById("pl");
target.classList.toggle("fa-pause");
target.classList.toggle("fa-play");

} else {
myaudio.play();
 var target = document.getElementById("pl");
target.classList.toggle("fa-play");
target.classList.toggle("fa-pause");
}

};

myaudio.onplaying = function() {
 isPlaying = true;
};
myaudio.onpause = function() {
 isPlaying = false;
 }; 
 };

这是我的 html 和 php

  <?php

                        $count = 1;
                       $noarry = DataDB::getInstance()->get_rows_from_field('music','group_id',$value);
                        foreach($noarry as $row):?>
            <ul id="insert_songMenu">    
                <li>
                    <div class="sort_num"><?php echo $count++;?>.</div>
                    <div class="song_name">
                        <i class="noItalics"><?php echo $row['music_name'];?></i>
                        <span><?php echo $row['by'];?></span>
                    </div>

                    <div class="content_feature">
                    <cite class="fa fa-play" onclick=play("user/<?php echo $usern.'/'.$row['snippet']; ?>")></cite>

                    </div>
                </li>

                 <?php endforeach; ?>`

Answer 1

放置在 php 之上

我认为这应该可以正常工作。JS:

var song_list = {};
function play(src,self) {
  for(song in song_list)
  {
         song_list[song].file.pause();
   }
    var myaudio = song_list[src].file;
    var isPlaying = song_list[src].isPlaying;
    myaudio.loop = true;



        if (isPlaying) {
            myaudio.pause()

            var target = self;
            target.classList.toggle("fa-pause");
            target.classList.toggle("fa-play");

        } else {
            myaudio.play();
            var target = self;
            target.classList.toggle("fa-play");
            target.classList.toggle("fa-pause");
        }



    myaudio.onplaying = function() {
        song_list[src].isPlaying = true;
    };
    myaudio.onpause = function() {
        song_list[src].isPlaying = false;
    };
};

PHP:

<?php

$count  = 1;
$noarry = DataDB::getInstance()->get_rows_from_field('music', 'group_id', $value);
foreach ($noarry as $row):
?>
           <ul id="insert_songMenu">    
                <li>
                    <div class="sort_num"><?php echo $count++; ?>.</div>
                    <div class="song_name">
                        <i class="noItalics"><?php echo $row['music_name']; ?></i>
                        <span><?php echo $row['by']; ?></span>
                    </div>

                    <div class="content_feature">
                    <cite class="fa fa-play" onclick=play("user/<?php echo $usern . '/' . $row['snippet']; ?>",this)></cite>

                    </div>
                </li>
           <script>
             song_list["user/<?php echo $usern . '/' . $row['snippet']; ?>"] = { 
                        file : new Audio("user/<?php echo $usern . '/' . $row['snippet']; ?>"), 
                        isPlaying : false
                        };
           </script>
                 <?php
endforeach;
?>

试试这个