0
Good morning,
I have a problem with data-title, I need two speakers with audio names list (Playlist) and every time I click on an audio it will play. But when I create the second column, <a> containing the data-title do not appear.
Someone would know me what the problem is and/or if I should use some other function?
HTML:
<div class="playlist playlist--responsive">
<h3 class="listHeading">COLUNA 1</h3>
<a href="audio/Audio_01.wav" data-title="Audio 1"></a>
<a href="audio/Audio_02.wav" data-title="Audio 2"></a>
<a href="audio/Audio_03.wav" data-title="Audio 3"></a>
<a href="audio/Audio_02.wav" data-title="Audio 4"></a>
<a href="audio/Audio_03.wav" data-title="Audio 5"></a>
</div>
<div class="playlist playlist--responsive">
<h3 class="listHeading">COLUNA 2</h3>
<a href="audio/Audio_06.wav" data-title="Audio 6"></a>
<a href="audio/Audio_07.wav" data-title="Audio 7"></a>
<a href="audio/Audio_08.wav" data-title="Audio 8"></a>
<a href="audio/Audio_09.wav" data-title="Audio 9"></a>
<a href="audio/Audio_10.wav" data-title="Audio 10"></a>
</div>
CSS:
.playlist {
background: #eee;
border: 1px solid #ccc;
padding: 0.5em 1em;
margin-right: 30px;
margin-bottom: 30px;
overflow: hidden;
float: left;
z-index: 1;
}
.listHeading {
color: blue;
}
.playlist h3,
.playlist a {
display: block;
}
.playlist a.activeTrack {
background-color: deeppink;
color: aliceblue;
}
.playlist--responsive {
width: 30%;
}
@media screen and (max-width: 400px) {
.playlist--responsive {
height: 50px;
}
}
@media screen and (min-width: 401px) and (max-width: 500px) {
.playlist--responsive {
height: 100px;
}
}
@media screen and (min-width: 801px) {
.playlist--responsive {
height: 440px;
}
JS Player:
// -- textonome
// -- CAUTION -- Read the following code on your own risk! :D
window.onload = function() {
var playlist = document.getElementsByClassName('playlist')[0],
tracks = playlist.getElementsByTagName('a'),
audioPlayer = document.getElementById('audioPlayer'),
currentTitle = document.getElementById('currentTitle'),
trackDuration,
trackIndex = 0,
playPauseBtn = document.getElementById('playPauseBtn'),
frwrdBtn = document.getElementById('frwrdBtn'),
rvrseBtn = document.getElementById('rvrseBtn'),
volPlusBtn = document.getElementById('volPlusBtn'),
volMinusBtn = document.getElementById('volMinusBtn'),
volIndicator = document.getElementById('volIndicator'),
currentDuration = document.getElementById('currentDuration'),
totalDuration = document.getElementById('totalDuration'),
trackProgressBar = document.getElementById('trackProgressBar');
function sortTracks(tracksArray, container) {
var trackTitles = [],
dataTitle,
l,
k,
m;
for (l = 0; l < tracksArray.length; l += 1) {
trackTitles[l] = tracksArray[l].getAttribute('data-title');
trackTitles[l] = trackTitles[l].toUpperCase();
}
trackTitles.sort();
for (k = 0; k < tracksArray.length; k += 1) {
for (m = 0; m < tracksArray.length; m += 1) {
dataTitle = tracksArray[m].getAttribute('data-title');
dataTitle = dataTitle.toUpperCase();
if (trackTitles[k] == dataTitle) {
container.appendChild(tracksArray[m]);
}
}
}
}
sortTracks(tracks, playlist);
function trackTitleSetter(tracksArray) {
var inTracks,
tracksTitle,
i;
for (i = 0; i < tracksArray.length; i += 1) {
inTracks = tracksArray[i];
tracksTitle = inTracks.getAttribute('data-title');
inTracks.innerHTML = '- ' + tracksTitle;
}
}
trackTitleSetter(tracks);
function setTimeRange(player) {
player.onloadeddata = function() {
var totalDurHour = Math.floor(Math.floor(player.duration) / 3600),
totalDurMin = Math.floor(Math.floor(player.duration / 60) % 60),
totalDurSec = Math.floor(player.duration) % 60;
trackDuration = player.duration * 1000;
trackProgressBar.max = trackDuration.toFixed(0);
trackProgressBar.value = 0;
totalDuration.innerHTML = (totalDurHour < 10 ? '0' + totalDurHour : totalDurHour) +
':' + (totalDurMin < 10 ? '0' + totalDurMin : totalDurMin) +
':' + (totalDurSec < 10 ? '0' + totalDurSec : totalDurSec);
currentDuration.innerHTML = '00:00:00';
};
}
function setCurrentDurationText(elemDotMethod, divider) {
var currentDurHour = Math.floor(Math.floor(elemDotMethod / divider) / 3600),
currentDurMin = Math.floor(Math.floor((elemDotMethod / divider) / 60) % 60),
currentDurSec = Math.floor(elemDotMethod / divider) % 60;
currentDuration.innerHTML = (currentDurHour < 10 ? '0' + currentDurHour : currentDurHour) +
':' + (currentDurMin < 10 ? '0' + currentDurMin : currentDurMin) +
':' + (currentDurSec < 10 ? '0' + currentDurSec : currentDurSec);
}
function setActiveTrackClass(tracksArray, activeTrack) {
var n;
for (n = 0; n < tracksArray.length; n += 1) {
tracksArray[n].classList.remove('activeTrack');
}
activeTrack.classList.add('activeTrack');
}
function clickToPlaySetter(tracksArray, player) {
var currentTrack,
currentTrackSource,
currentTrackTitle,
j;
for (j = 0; j < tracksArray.length; j += 1) {
currentTrack = tracks[j];
tracks[j].index = j;
currentTrack.onclick = function(e) {
e.preventDefault();
currentTrackSource = this.getAttribute('href');
currentTrackTitle = this.getAttribute('data-title');
player.setAttribute('src', currentTrackSource);
currentTitle.innerHTML = currentTrackTitle;
trackIndex = this.index;
playPauseBtn.innerHTML = '[PAUSE]';
setTimeRange(player);
volIndicator.innerHTML = Math.round(audioPlayer.volume * 100) + '%';
player.oncanplay = player.play();
setActiveTrackClass(tracks, this);
};
}
}
clickToPlaySetter(tracks, audioPlayer);
function playNext() {
if (playPauseBtn.innerHTML == '[PAUSE]') {
if (trackIndex < (tracks.length - 1)) {
trackIndex += 1;
audioPlayer.setAttribute('src', tracks[trackIndex].getAttribute('href'));
currentTitle.innerHTML = tracks[trackIndex].getAttribute('data-title');
setTimeRange(audioPlayer);
if (playPauseBtn.innerHTML == '[PAUSE]') {
audioPlayer.oncanplay = audioPlayer.play();
}
setActiveTrackClass(tracks, tracks[trackIndex]);
} else {
trackIndex = 0;
audioPlayer.setAttribute('src', tracks[trackIndex].getAttribute('href'));
currentTitle.innerHTML = tracks[trackIndex].getAttribute('data-title');
setTimeRange(audioPlayer);
if (playPauseBtn.innerHTML == '[PAUSE]') {
audioPlayer.oncanplay = audioPlayer.play();
}
setActiveTrackClass(tracks, tracks[trackIndex]);
}
}
}
audioPlayer.onended = playNext;
function updateTimeAndBar() {
trackProgressBar.value = audioPlayer.currentTime * 1000;
setCurrentDurationText(audioPlayer.currentTime, 1);
}
audioPlayer.ontimeupdate = updateTimeAndBar;
playPauseBtn.onclick = function() {
if (audioPlayer.currentSrc != "") {
if (audioPlayer.paused) {
audioPlayer.oncanplay = audioPlayer.play();
playPauseBtn.innerHTML = '[PAUSE]';
} else {
audioPlayer.pause();
playPauseBtn.innerHTML = '[PLAY]';
}
}
};
frwrdBtn.onclick = function() {
audioPlayer.currentTime += 5;
updateTimeAndBar();
};
rvrseBtn.onclick = function() {
audioPlayer.currentTime -= 5;
updateTimeAndBar();
};
volPlusBtn.onclick = function() {
if (audioPlayer.volume < 1.0) {
audioPlayer.volume += 0.05;
audioPlayer.volume = Number((audioPlayer.volume).toFixed(2));
volIndicator.innerHTML = Math.round(audioPlayer.volume * 100) + '%';
}
};
volMinusBtn.onclick = function() {
if (audioPlayer.volume > 0.0) {
audioPlayer.volume -= 0.05;
audioPlayer.volume = Number((audioPlayer.volume).toFixed(2));
volIndicator.innerHTML = Math.round(audioPlayer.volume * 100) + '%';
}
};
trackProgressBar.oninput = function() {
audioPlayer.currentTime = trackProgressBar.value / 1000;
setCurrentDurationText(trackProgressBar.value, 1000);
};
trackProgressBar.onmousedown = function() {
audioPlayer.ontimeupdate = null;
audioPlayer.onended = function() {
audioPlayer.pause();
playPauseBtn.innerHTML = '[PLAY]';
};
};
trackProgressBar.onmouseup = function() {
audioPlayer.ontimeupdate = updateTimeAndBar;
audioPlayer.onended = playNext;
};
};
Thank you all.
Hello, all right? From what I saw in the code, there’s a difference in the two columns. In the first you use the tag "a" and in the second column you use the tag "span". See if this is not the problem.
– Rodrigo Dias de Freitas
Do you have any idea what it might be?
– Michael Dias