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

试试这个

Answer 2

你可以简单地停止前一个：

var myaudio=null;
function play(src){  
   if(myaudio) myaudio.pause();  
   myaudio = new Audio(src);
   ...
}

从php for循环播放带有javascript函数的音频

2 个答案: