Problème de playlist

Question

zougui91

19 Mar 2017 à 20:09

bonjour,

j'ai créé un lecteur audio a l'aide de HTML, JS et de CSS et j'ai un problème. je lance la musique 1 jusque la tout va bien puis elle se fini et sa lance la musique 2 la musique je l'entend mais le lecteur lui on ne le voit pas, j'ai fait en sorte qu'on ne voit pas toutes les pistes audio, seulement celle en cour.


<head>
		<link rel="stylesheet" href="lecteur_test2.css">
		<meta charset="utf-8" />
		<title>
		lecteur
		</title>
		<style>

		li {display:none;}
		li:first-of-type {display:block;}

		</style>
	</head>

	<body>

		<ul id="playlist">
			<li>
				<figure id="audioplayer" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording" >
					<figcaption>
						<div id="track">Track
							<span itemprop="name">ANUBIS
							</span>
						</div>
						<br>
						<div id="artist">Artist
							<span itemprop="byArtist">YOUTUNE
							</span>
						</div>
						<br>
						<div id="time">Time
							<span id="playbacktime">00:00
							</span>
						</div>
					</figcaption>
					<meta itemprop="duration" content="PT2M29S">
					<div id="fader">
					</div>
					<div id="playback">
					</div>
					<audio controls id="audiotrack" preload="auto" itemprop="audio">
						<source src="audio/06.mp3"/>
					</audio>
				</figure>
			</li>

			<li>
				<figure id="audioplayer" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording" >
					<figcaption>
						<div id="track">Track
							<span itemprop="name">CHEB PRINCE 2  LÉ LÉ LA.. - LINSTRU !!!
							</span>
						</div>
						<br>
						<div id="artist">Artist
							<span itemprop="byArtist">SOFIANE SMILE
							</span>
						</div>
						<br>
						<div id="time">Time
							<span id="playbacktime">00:00
							</span>
							</div>
					</figcaption>
					<meta itemprop="duration" content="PT2M29S">
					<div id="fader">
					</div>
					<div id="playback">
					</div>
					<audio controls id="audiotrack" preload="auto" itemprop="audio">
						<source src="audio/10.mp3"/>
					</audio>
				</figure>
			</li>
		</ul>
		<script src="lecteur_test2.js" ></script>



function playNext()
{
    this.parentNode.style.display="none";
    this.nextInTheList.parentNode.style.display="block";
    this.nextInTheList.play();
}

function playList()
{
    var audioList,k,km,nextInTheList;
    audioList=document.getElementById("playlist").getElementsByTagName("audio");
    km=audioList.length;
    for (k=0;k<km;k++)
    {
        if (k<(km-1)) nextInTheList=k+1; else nextInTheList=0;
        audioList[k].nextInTheList=audioList[nextInTheList]
        audioList[k].addEventListener("ended",playNext,false);
    }

}
window.addEventListener("load",playList,false);
function player() {
  if (audioTrack.paused) {
    setText(this, "Pause");
    audioTrack.play();
    } else {
    setText(this,"Play");
    audioTrack.pause(); 
    }
}

function setText(el,text) {
    el.innerHTML = text;
}

function finish() {
        audioTrack.currentTime = 0;
        setText(playButton,"Play");
}

function updatePlayhead() { 
    playhead.value = audioTrack.currentTime;
    var s = parseInt(audioTrack.currentTime % 60);
    var m = parseInt((audioTrack.currentTime / 60) % 60);
    s = (s >= 10) ? s : "0" + s;
    m = (m >= 10) ? m : "0" + m;
    playbacktime.innerHTML = m + ':' + s ;
    
}

function volumizer() {
    if (audioTrack.volume == 0) { setText(muteButton,"volume"); }
    else { setText(muteButton,"volumehigh"); }
}

function muter() {
    if (audioTrack.volume == 0) {
        audioTrack.volume = restoreValue;
        volumeSlider.value = restoreValue;
    } else {
        audioTrack.volume = 0;
        restoreValue = volumeSlider.value;
        volumeSlider.value = 0;
    }
}

function setAttributes(el, attrs) {
    for(var key in attrs){
        el.setAttribute(key, attrs[key]);
    }
}

var audioPlayer = document.getElementById("audioplayer"),
fader = document.getElementById("fader"),
playback = document.getElementById("playback"),
audioTrack = document.getElementById("audiotrack"),
playbackTime = document.getElementById("playbacktime"),
playButton = document.createElement("button"),
muteButton = document.createElement("button"),
playhead = document.createElement("progress")
volumeSlider = document.createElement("input");
setText(playButton, "Play");
setText(muteButton, "volumehigh");
setAttributes(playButton, { "type": "button", "class": "ss-icon" });
setAttributes(muteButton, { "type": "button", "class": "ss-icon" });
muteButton.style.display = "block";
muteButton.style.margin = "0 auto";
setAttributes(volumeSlider, { "type": "range", "min": "0", "max": "1", "step": "any", "value": "1", "orient": "vertical", "id": "volumeSlider" });
var duration = audioTrack.duration;
setAttributes(playhead, { "min": "0", "max": "100", "value": "0", "id": "playhead" });
fader.appendChild(volumeSlider);
fader.appendChild(muteButton);
playback.appendChild(playButton);
playback.appendChild(playhead);
audioTrack.removeAttribute("controls");
playButton.addEventListener("click", player, false);
muteButton.addEventListener("click", muter, false);
volumeSlider.addEventListener("input", function(){ audioTrack.volume = volumeSlider.value; }, false);
audioTrack.addEventListener('volumechange', volumizer, false);
audioTrack.addEventListener('playing', function(){ playhead.max = audioTrack.duration; }, false);
audioTrack.addEventListener('timeupdate', updatePlayhead, false);
audioTrack.addEventListener('ended', finish, false);

j'éspère que vous réussirais a m'aider je ne voit pas d'où vient le problème.
Modifié par zougui91 (19 Mar 2017 - 20:12)

Sujet clos

Questions générales et questions de débutants

Problème de playlist