We are trying to make a html5 audio player in which we have more than one .mp3 file
which we shows in tabular form using loop with php
and we actually want that : when we will click on every mp3 file
then it should be play in only one interface just like as http://gaana.com .
What we did :
<?php
if(isset($_GET['song'])) {
$song_name = $_GET['song'];
echo "<audio id=\"audio1\" src=\"$song_name.mp3\" controls preload=\"none\" type=\"audio/mp3\" autobuffer autoplay></audio>";
}
?>
<script>
function EvalSound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.play();
}
function EvalSound1(soundobj1) {
var thissound=document.getElementById(soundobj1);
thissound.pause();
}
</script>
in the above code we are getting the .mp3 file
using get
method and we are passing the mp3 file
name in within url.
DEMONSTRATION CODE:
var tracks = ['https://archive.org/download/testmp3testfile/mpthreetest.mp3', 'http://www.tonycuffe.com/mp3/tail%20toddle.mp3']; Array.prototype.map.call(document.querySelectorAll("button"), function(element, index){ element.addEventListener("click", changeTrack.bind(null, tracks[index]), false); }); var autoPlay = true; function changeTrack(track) { var audioElement = document.getElementById("audio1"); audioElement.src = track; } audioElement.addEventListener("canplay", startPlaying, false); function startPlaying() { if (autoPlay) { this.play(); } }
<button>Track 1</button> <button>Track 2</button> <audio id="audio1" src="song_name.mp3" controls preload="none" type="audio/mp3" autobuffer autoplay></audio>";
CORE CODE (actual solution)
var autoPlay = true;
function changeTrack(track)
{
var audioElement = document.getElementById("audio1");
audioElement.src = track;
}
audioElement.addEventListener("canplay", startPlaying, false);
function startPlaying()
{
if (autoPlay)
{
this.play();
}
}
When somebody clicks on another audio link, it should invoke the function changeTrack()
with an argument referring to the track's url. If the track is loaded it will start to play.
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.