Skip to main content

enable the track in the player through the playlist

I want to add a small player to my site to listen to music. I found a beautiful example that I liked and want to change and finish it a little.

There's a button down here, it opens the playlist.

And I want that when I click on any track from the playlist, it will play in the player.

I manually added the tracks to the playlist, gave them the same ID and different values:

<div id="track" value="0" class="trackName">qwe asd — bensound summer</div>
<div id="track" value="1" class="trackName">zxc — bensound anewbeginning</div>

Next, I try to get all these IDs with values:

var track = document.getElementById("track").getAttribute("value");

And now somehow make it so that when I click on one of the tracks, the currentSong variable is set to the value of the selected track.

But it doesn't work for me, my variable var track always has the first value, i.e. 0.

What am I doing wrong or is there any other way to do it?

PS. The snippet needs to be opened on full page.

var song = new Audio;
var isStopped = true;
var currentSong = 0;
var playlist = [];
var playlistVisible = false;

function skip(to) {
    if (to == 'prev') {
        stop();
        currentSong = (--currentSong)%playlist.length;
        if (currentSong < 0) {
            currentSong += playlist.length;
        }
        playpause();
    }
    else if (to == 'next') {
        stop();
        currentSong = (++currentSong)%playlist.length;
        playpause();
    }
}

function playpause() {
  if (!song.paused) {
        song.pause();
        document.getElementById("glow").classList.add("disable-animation");
    }
  else if (playlist.length == 0){
    togglePlaylist();
  }
    else {
      if (isStopped) {
            song.src = playlist[currentSong];
        }
        song.play();
        songFile = playlist[currentSong].split("/");
        songName = document.getElementById("songName");
        songName.innerHTML = songFile[songFile.length - 1].split('.').slice(0, -1).join('.');
        document.getElementById("glow").classList.remove("disable-animation");
        isStopped = false;
    }
}

function stop() {
    song.pause();
    document.getElementById("glow").classList.add("disable-animation");
    song.currentTime = 0;
    document.getElementById("seek").value = 0;
    isStopped = true;
    document.getElementById("songName").innerHTML = "playing track..";
}

function setPos(pos) {
    song.currentTime = pos;
}

function mute() {
    if (song.muted) {
        song.muted = false;
        document.getElementById('mute').className = "fa fa-volume-up";
    }
    else {
        song.muted = true;
        document.getElementById('mute').className = "fa fa-volume-off";
    }
}

function setVolume(volume) {
    song.volume = volume;
}

function togglePlaylist() {
    if (playlistVisible) {
        document.getElementById('playlist').className = "hide";
        playlistVisible = false;
    }
    else {
        document.getElementById('playlist').className = "";
        playlistVisible = true;
    }
}

function addList() {
    sourceUrl = document.getElementById('sourceUrl').value;
    sourceUrl.split(",").forEach((file) => {
        fileUrl = file.trim();
        if (fileUrl != "" && playlist.indexOf(fileUrl) == -1) {
            parent = document.getElementById('list');
            listItem = document.createElement('div');
            listItem.setAttribute('class','list-item');

            wrapper = document.createElement('div');
            wrapper.setAttribute('class','wrap-text');

            listItem.appendChild(wrapper);

            parent.appendChild(listItem);
            playlist.push(fileUrl);
        }
    });
  document.getElementById('sourceUrl').value = '';
}

function removeList(item) {
    index = playlist.indexOf(item.parentElement.firstChild.innerText);
    if (index != -1){
        playlist.splice(index,1);
        item.parentElement.remove();
    }
}

song.addEventListener('error', function(){
    stop();
    document.getElementById("songName").innerHTML = "error loading audio";
});

song.addEventListener('timeupdate', function() {
    curtime = parseInt(song.currentTime,10);
    document.getElementById('seek').max = song.duration;
    document.getElementById('seek').value = curtime;
});

song.addEventListener("ended", function() {
    song.pause();
    song.currentTime = 0;
    document.getElementById('seek').value = 0;
    if ((currentSong + 1) >= playlist.length) {
        currentSong = 0;    
    }
    else {
        currentSong++;
    }
    stop();
    song.src = playlist[currentSong];
    playpause();
});

var input = document.getElementById("sourceUrl");
input.addEventListener("keyup", function(event) {
    if (event.keyCode === 13) {
        event.preventDefault();
        addList();
    }
});


// This area of code is only for preview purposes only

document.getElementById('sourceUrl').value = ["https://www.bensound.com/bensound-music/bensound-summer.mp3",
"https://www.bensound.com/bensound-music/bensound-anewbeginning.mp3"];
addList();
document.getElementById("glow").classList.remove("disable-animation");

// Code for preview ends here
* {
  box-sizing: border-box;
}
html {
  background: #000000;
}
html,
body,
.container {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  white-space: nowrap;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none; 
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.glow {
  position: absolute;
  width: 300px;
  height: 300px;
  background: linear-gradient(0deg, #000000, #262626);
  border-radius: 50%;
}
.glow::before,
.glow::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  background: linear-gradient(
    45deg,
    #ebc6df,
    #ebc6c9,
    #e1c6eb,
    #c6c9eb,
    #c6e8eb,
    #e373fb,
    #f787e6,
    #cb87f7,
    #87a9f7,
    #87f7ee
  );
  background-size: 400%;
  max-width: calc(300px + 4px);
  max-height: calc(300px + 4px);
  width: calc(300px + 4px);
  height: calc(300px + 4px);
  z-index: -1;
  animation: animate 20s linear infinite;
  border-radius: 50%;
}
.disable-animation::before,
.disable-animation::after {
  animation-play-state: paused;
}
.glow::after {
  filter: blur(28px);
}
#player {
  width: 243px;
  height: 212px;
  text-align: center;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#playlist {
  width: 400px;
  height: 500px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translate(0%, -50%);
}
#songName {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 30px;
}
.playlist-btn {
  width: 243px;
  margin-top: 30px;
  text-align: center;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.hide {
  display: none;
}
#list {
  height: 450px;
  max-height: 450px;
  margin-top: 16px;
  font-size: 15px;
  overflow-x: hidden;
  overflow-y: scroll;
  color: #fff;
  text-align: left;
  padding-left: 8px;
}
.trackName {
    margin: 10px;
}
.list-item {
  line-height: 30px;
  height: 30px;
  margin-top: 4px;
}
.list-container button {
  width: 30px;
  padding: 0;
  float: right;
  margin-right: 4px;
}
.add-list {
  padding: 4px 6px;
}
.wrap-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 190px;
  display: inline-block;
}
#sourceUrl {
  background: none;
  padding: 8px;
  border: 2px solid #1f1f1f;
  border-radius: 47px;
  outline: none;
  color: white;
  height: 30px;
  width: 192px;
}
#sourceUrl:active,
#sourceUrl:focus {
  border: 2px solid #0088ff;
}
.text {
  color: #ffffff;
  display: block;
}
button {
  background: #000000;
  color: #ffffff;
  background: linear-gradient(0deg, #000000, #262626);
  font-size: 14px;
  border: none;
  outline: none;
  padding: 0px 15px;
  width: 55px;
  height: 30px;
  line-height: 30px;
  border-radius: 32px;
}
button:hover {
  box-shadow: 0 0 8px 0px #ffffff61;
}
button:active {
  box-shadow: inset 0 0 6px 0px #ffffff61;
}

#seek,
#volume {
  -webkit-appearance: none;
  border: 1px solid #000000;
  height: 5px;
  vertical-align: middle;
  border-radius: 20px;
  background-color: #232323;
  outline: none;
}
#seek::-webkit-slider-thumb,
#volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid #000000;
  border-radius: 10px;
  background: #ffffff;
}
#seek {
  display: block;
  width: 230px;
}
.scrollbar::-webkit-scrollbar {
  max-width: 5px;
  max-height: 5px;
}
.scrollbar::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #333;
}
.scrollbar::-webkit-scrollbar-thumb:hover {
  box-shadow: inset 0 0 1px 1px #5c6670;
}

.scrollbar::-webkit-scrollbar-track:hover {
  border: 1px solid #000000;
  border-radius: 20px;
  background-color: #232323;
}

@keyframes animate {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" type="text/css">
<div class="container">
  <div id="glow" class="glow disable-animation">
    <div id="player">
      <span class="text">Player</span>
      <br>
      <span id="songName" class="text">playing track..</span>
      <br>
      <div class="playback_controls">
        <button onclick="skip('prev')">
          <i class="fa fa-fast-backward"></i>
        </button>
        <button onclick="playpause()">
          <i class="fa fa-play"></i><i class="fa fa-pause"></i>
        </button>
        <button onclick="stop()">
          <i class="fa fa-stop"></i>
        </button>
        <button onclick="skip('next')">
          <i class="fa fa-fast-forward"></i>
        </button>
      </div>
      <br>
      <div id="seekbar">
        <input type="range" oninput="setPos(this.value)" id="seek" value="0" max="">
      </div>
      <br>
      <div class="volume_controls">
        <button onclick="mute()">
          <i id="mute" class="fa fa-volume-up"></i>
        </button>
        <input type="range" id="volume" oninput="setVolume(this.value)" min="0" max="1" step="0.01" value="1">
      </div>
    </div>

    <div class="playlist-btn">
      <button onclick="togglePlaylist()">
        <i id="playlist-btn" class="fa fa-list"></i>
      </button>
    </div>

  </div>
</div>

<div id="playlist" class="hide">
    <span class="text">Playlist</span>
    <div class="list-container">

      <div id="list" class="scrollbar">
        <div id="track" value="0" class="trackName">qwe asd — bensound summer</div>
        <div id="track" value="1" class="trackName">zxc — bensound anewbeginning</div>
      </div>

      <div class="add-list" style="display: none">
        <input id="sourceUrl" type="text" placeholder="enter audio url" />
        <button onclick="addList()">+</button>
      </div>

    </div>
</div>
Via Active questions tagged javascript - Stack Overflow https://ift.tt/qv9MHlC

Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

ValueError: X has 10 features, but LinearRegression is expecting 1 features as input

So, I am trying to predict the model but its throwing error like it has 10 features but it expacts only 1. So I am confused can anyone help me with it? more importantly its not working for me when my friend runs it. It works perfectly fine dose anyone know the reason about it? cv = KFold(n_splits = 10) all_loss = [] for i in range(9): # 1st for loop over polynomial orders poly_order = i X_train = make_polynomial(x, poly_order) loss_at_order = [] # initiate a set to collect loss for CV for train_index, test_index in cv.split(X_train): print('TRAIN:', train_index, 'TEST:', test_index) X_train_cv, X_test_cv = X_train[train_index], X_test[test_index] t_train_cv, t_test_cv = t[train_index], t[test_index] reg.fit(X_train_cv, t_train_cv) loss_at_order.append(np.mean((t_test_cv - reg.predict(X_test_cv))**2)) # collect loss at fold all_loss.append(np.mean(loss_at_order)) # collect loss at order plt.plot(np.log(al...
Post a Comment
Read more

Sorting large arrays of big numeric stings

I was solving bigSorting() problem from hackerrank: Consider an array of numeric strings where each string is a positive number with anywhere from to digits. Sort the array's elements in non-decreasing, or ascending order of their integer values and return the sorted array. I know it works as follows: def bigSorting(unsorted): return sorted(unsorted, key=int) But I didnt guess this approach earlier. Initially I tried below: def bigSorting(unsorted): int_unsorted = [int(i) for i in unsorted] int_sorted = sorted(int_unsorted) return [str(i) for i in int_sorted] However, for some of the test cases, it was showing time limit exceeded. Why is it so? PS: I dont know exactly what those test cases were as hacker rank does not reveal all test cases. source https://stackoverflow.com/questions/73007397/sorting-large-arrays-of-big-numeric-stings
Post a Comment
Read more

How to load Javascript with imported modules?

I am trying to import modules from tensorflowjs, and below is my code. test.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title </head> <body> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script> <script type="module" src="./test.js"></script> </body> </html> test.js import * as tf from "./node_modules/@tensorflow/tfjs"; import {loadGraphModel} from "./node_modules/@tensorflow/tfjs-converter"; const MODEL_URL = './model.json'; const model = await loadGraphModel(MODEL_URL); const cat = document.getElementById('cat'); model.execute(tf.browser.fromPixels(cat)); Besides, I run the server using python -m http.server in my command prompt(Windows 10), and this is the error prompt in the console log of my browser: Failed to loa...
Post a Comment
Read more