HTML5 - Data-title with <a> Does Not Appear

Asked

Viewed 62 times

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;
  };
};

Evidência:

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.

  • Do you have any idea what it might be?

1 answer

0

A } key is missing at the end of your css file, but other than that, I have not identified anything else.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.