javascript — Как воспроизвести много аудиофайлов с помощью одного аудиоплеера HTML5
Мы пытаемся сделать аудиоплеер HTML5, в котором у нас более одного .mp3 file который мы показываем в табличной форме, используя loop with php и мы действительно хотим этого: когда мы нажмем на каждый mp3 file тогда он должен играть только в одном интерфейсе, как http://gaana.com.
Что мы сделали :
<?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>
в приведенном выше коде мы получаем .mp3 file с помощью get метод, и мы передаем mp3 file имя в URL.
Решение
ДЕМОНСТРАЦИОННЫЙ КОД:
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>"; Другие решения
Других решений пока нет …
detector