Can Html5 audio player play more then one song
Question
I'm using php glob() to get a list of the songs in a folder then use the shuffle() to shuffle the songs then use the foreach loop to loop through the songs. but I can only get on song to play. I'm trying to get it to play one song then when one song is over start another song automatically Iv done a lot of googling but cant seem to find any thing is this only possible with icecast? all post my code below
<!DOCTYPE HTML>
<html>
<head>
<title>ymp</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<h1>YMP RADIO</h1>
<?php require ("dropmenu.html"); ?>
<?php
$music = glob("songs/*"); // get all files in the music directory
shuffle($music);
foreach ($music as $song){ // try and loop a random songs
print <<<WTF
<audio id="player" src="$song" type="audio/mpeg"></audio>
<audio id="player" src="$song" type="audio/ogg"></audio>
WTF;
}
var_dump($song);
?>
<div>
<table border="1px" >
<tr>
<td class="tdpage" >
<img src="ymplogo5.jpg" alt="" />
<p><button class="botton"; onclick="document.getElementById('player').play()">Play</button>
<button class="botton"; onclick="document.getElementById('player').pause()">Pause</button>
<button class="botton"; onclick="document.getElementById('player').volume+=0.1">Volume up </button>
<button class="botton"; onclick="document.getElementById('player').volume-=0.1">Volume down</button>
</td>
</tr>
</table>
</div>
<br /><br /><br />
</body>
</html>
1 answers
solution1
0 ACCPTED 2013-11-29 13:44:24
ugh, so if I understand your question correctly, you seem to be wanting to implement user interaction feature (playlists) via server side processing (php). Unfortunately this won't work. Your php only provides the urls of the songs. The rest of the work lies on client side work like js. You can do the following (but let me warn you it's not as simple as I think you take it to be)
- Take the url list from php and echo it in a script tag and store it in a js variable.
- Then use js to play the first song (keep in mind we will only be using one audio tag)
- Then listen for an event listener that tells the js when the song ends, and when it does, play the next song (replace the url with the new one).
Most of your work will be in js and not in php. And even when you do this, this will only make a bare bones media player.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.