Question

我想创建一个播放动态播放列表歌曲的简单html5音频播放器。我有正确加载的页面，如果单击链接，则歌曲开始播放当它结束时，列表中的一个开始......一切都很好。

我也有这个搜索功能，通过php在同一页面上的新动态创建列表中返回来自db的歌曲链接..这也有效。但是，只要单击“新”（搜索结果）链接之一，该歌曲就会在新的浏览器选项卡中打开。我希望它能像所有其他曲调一样在“默认”播放器中打开。

我在这里缺少什么？我认为在我的代码中必须放错位，但我无法弄清楚是什么......

以下是我的代码......

的index.php

<html>
<meta name="viewport" content="width=400"> 

<head>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.js'></script>

<style>

#playlist,audio{
    background:#666;
    width:100%;
    padding:5px;
    /*margin:5px;*/
    display: block;
    }
.active a{
    color:#5DB0E6;
    text-decoration:none;
    }
li a{
    color:#eeeedd;
    background:#333;
    padding:5px;
    display:block;
    }
li a:hover{
    text-decoration:none;
    }

</style>

<script>
function searchTrack(str) {
    if (str == "") 
    {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } 
    else 
    {
        if (window.XMLHttpRequest) 
        {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

xmlhttp.onreadystatechange = function() 
    {
        if (this.readyState == 4 && this.status == 200) 
            {
            document.getElementById("txtHint").innerHTML = this.responseText;
            }
    };
            xmlhttp.open("GET","search.php?q="+str,true);
            xmlhttp.send();
    }

}
</script>



</head>

<script>
$(document).ready(function () {
var audio;
var playlist;
var tracks;
var current;

init();
function init() {
    current = 0;
    audio = $('#audio');
    playlist = $('#playlist');
    tracks = playlist.find('li a');
    len = tracks.length - 1;
    audio[0].volume = 1;
    audio[0].play();
    playlist.find('a').click(function (e) {
        e.preventDefault();
        link = $(this);
        current = link.parent().index();
        run(link, audio[0]);
    });
    audio[0].addEventListener('ended', function (e) {
        current++;
        if (current == len+1) { 
            current = 0;
            link = playlist.find('a')[0];
        } else {
            link = playlist.find('a')[current];
        }
        run($(link), audio[0]);
    });
}
function run(link, player) {
    player.src = link.attr('href');
    par = link.parent();
    par.addClass('active').siblings().removeClass('active');
    audio[0].load();
    audio[0].play();
    }
})

</script>

<body>

<form>
Search: <input type="text" onkeyup="searchTrack(this.value)">
</form>

<br>

<audio id="audio" preload="none" tabindex="0" controls="" type="audio/mpeg" width="100%">
</audio>

<ul id="playlist">

    <div id="txtHint">
        <?php 
            include 'connect.php';
            $sql="SELECT * FROM music ORDER BY RAND() LIMIT 25";
            $result = mysql_query($sql,$conn);

            while($row = mysql_fetch_array($result)) {
                echo '<li><a href="' . $row['location'] . '">' . $row['artist'] . ' - ' . $row['title'] . '</a></li>';
            }
        ?>  
    </div>
<ul>


</body>
</html>

和search.php

<?php
include 'connect.php';

$query = $_GET['query']; //input from search

$sql="SELECT * FROM music WHERE artist LIKE '%".$query."%' OR title LIKE '%".$query."%' LIMIT 25";
$result = mysql_query($sql, $conn) or die (mysql_error());

while($row = mysql_fetch_array($result)) {

echo '<li><a href="' . $row['location'] . '">' . $row['artist'] . ' - ' . $row['title'] . '</a></li>';}

mysql_close($conn);
?>

Answer 1

我认为问题在于这篇JS：

<button class="btn btn-danger delete" 
        data-type="{%=file.deleteType%}" 
        data-url="{%=file.deleteUrl%}" 
        data-data='{ "fileName": "{%=file.name%}" }' {% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}' {% } %}>
    <i class="glyphicon glyphicon-trash"></i>
    <span>Delete</span>
</button>

files: [
  {
    name: "yourfilename",
    deleteUrl: "The handler or url to call for delete",
    deleteType: "POST"
  }
]

..仅在init（）期间执行。因此事件绑定有效，但仅适用于从一开始就存在的li元素中的所有元素。稍后添加到页面中的任何li都没有绑定到它们的事件。

解决方案是不绑定到a元素或li元素，但绑定到ul元素，然后在JS中找出列表中的哪个元素被单击，然后对其执行JS操作。然后，列表项是从开始处还是稍后添加并不重要。

你应该能够做到这一点，因为“冒泡”。有关详细信息，请参阅此处：https://javascript.info/bubbling-and-capturing

祝你好运！

带有ajax的动态html5音频播放列表

1 个答案: