我如何滾動音頻播放列表

我試圖製作一個可以滾動的播放列表，但沒有任何成功。我很欣賞任何方向。我正在動態地讀取文件中的.mp3文件，並在div中顯示mp3名稱。如果我添加多於6個文件，則div區域會增加，以便顯示mp3名稱，但它超出了控件的範圍。如果可能，我想讓列表在6個名字後滾動。這裏是我的代碼：我如何滾動音頻播放列表

HTML：

... 
<!-- Create out audio controls --> 
<audio id="audio" preload="auto" controls="controls" type="audio/mpeg" ontimeupdate="displayTime(this)"> 
<source src="data/song1.mp3">song1.mp3" type="audio/mpeg" > 
Unsupported audio format! 
</audio> 

<!--Audio in our Playlist--> 
<div id="Playlist"> 
<ul class="playlist"> 
<?php $files = scandir("data/"); ?> 
<?php foreach ($files as $file) 
if ($file != '.' && $file != '..') 
    echo "<li audiourl=\"data/$file\"></li>"; ?> 

</ul> 
</div> 
...

CSS：

... 

.playlist 
{ 
position: relative; 
background:#666; 
top: 295px; 
left: 730px; 
width:500px; 
padding:15px; 

} 


#Playlist ul.playlist 
{ 
position: relative; 
overflow: auto; 

} 
...

JS：

... 
var playList = document.getElementsByClassName('Playlist'); 
playList.scrollTop = 400; 
...

來源

2016-12-06 suffa

你想使用JavaScript，而不是「HTML5」，這是我聽過的最被濫用的術語代碼示例。 – Rob

@Rob我以爲我使用Javascript，至少我在嘗試.... – suffa

你的標題問如何在「HTML5」中做到這一點。 – Rob

我的答案是基於更多的PHP，但是：

<div class="carousel-inner"> 
    <?php 
     $chunky = array_chunk ($files , 6); 
     foreach ($chunky as $array) { 
      echo '<div class="item"><ul>'; 
       foreach ($array as $name){ 
        echo '<li>' . $name . '</li>'; 
       } 
      echo '</ul></div>'; 
     } 
    ?> 
</div>

您可以使用array_chunk($files, 6)將文件拆分爲六個組，然後執行類似上面的操作，將它們輸出到Bootstrap輪播的標記中？（https://getbootstrap.com/examples/carousel/）。

編輯：這裏https://eval.in/692526

來源

2016-12-07 00:02:57

我如何滾動音頻播放列表

回答

相關問題