Home / Questions / 549386
Accepted
Narciso Aifuz
Asked: 2022-08-01 19:13:38 +0800 CST 2022-08-01 19:13:38 +0800 CST

audio playlist not working with local .mp3

  • 772

I have a javascript playlist function that works great with the online audio playlist.

If the list with the tag ais HTTPS:// type address, it works fine.

This is the original that works fine (with URLs on the web).

But when the local hreftag ais of type ../list/audio.mp3 , (or similar) the next track doesn't play. Plays only when selected with click.

I'm not sure why the playlist with a local address in hrefthe playlist in HTML5 doesn't work

init();

function init() { 

var audio = document.getElementById("audio"); 
var playlist = document.getElementById('playlist'); 
var tracks = playlist.getElementsByTagName('a'); 

audio.volume = 0.10; 
audio.play(); 

for(var track in tracks) { 
    
    var link = tracks[track]; 
    
    if(typeof link === "function" || typeof link === "number") continue;            
    
    link.addEventListener("click", function(e) {    
        
        e.preventDefault(); 
        var song = this.getAttribute('href');   
        
        run(song, audio, this); 
    }); 

} 

audio.addEventListener("ended", function(e) { 
    
    for(var track in tracks) {
        
        var link = tracks[track]; 
        var nextTrack = parseInt(track) + 1;    
        
        if(typeof link === "function" || typeof link === "number") continue; 
        
        if(!this.src) this.src = tracks[0]; 
        
        if(track == (tracks.length - 1)) nextTrack = 0; 
        
        console.log(nextTrack);     
        
        if(link.getAttribute("href") === this.src) {    
            
            var nextLink = tracks[nextTrack];   
            run(nextLink.getAttribute('href'), audio, nextLink); 
            break; 
        
        } 
    
    } 

}); 

} 

function run(song, audio, link) { 

var parent = link.parentElement;

//quitar el active de todos los elementos de la lista   
var items = parent.parentElement.getElementsByTagName('li'); 

for(var item in items) { 
    if(items[item].classList) items[item].classList.remove("active"); 
} 

//agregar active a este elemento 
parent.classList.add("active"); 

//tocar la cancion 
audio.src = song; 
audio.load(); 
audio.play(); 
}
audio {
display: block;
width: 100%;
max-width: 300px;
}

#playlist {
display: block;
width: 100%;
max-width: 300px;
padding: 10px 5px;
list-style: none;
}

a { 
text-decoration: none; 
} 

.active a { 
color: #5DB0E6; 
text-decoration: none; 
} 

li a {
color: #eeeedd; 
background: #333; 
padding: 5px; 
display: block; 
}
<audio id="audio" preload="auto" tabindex="0" controls="" > 
  <source src="../audio/uno.mp3"> 
</audio>
    
    <ul id="playlist"> 
        
        <li class="active"> 
            <a href="../audio/uno.mp3">Audio uno</a> 
        </li> 
        
        <li>
            <a href="../audio/dos.mp3">Audio dos</a> 
        </li> 
        
        
    </ul>

javascript

1 Answers

  1. Best Answer

    There are several things to correct in your code:

    • In general, avoid declaring variables with var, because they are declared in global scope and can interfere with other parts of your code. I recommend you read this article to know more about it.
    • There are some conditionals that don't make sense, because you get HTML elements and compare if they are function or number
    • When searching for the currently playing song, inside the loop, you should have just the compare and, if matched, set the value of nextTrackand exit the loop with break, but the .findIndex() method makes that easy
    • I recommend using .querySelectorAll() instead of getting elements by class or tag, I think it's simpler and also easier to iterate with .forEach(), although you should keep in mind that this is more a matter of preference than optimization

    let audio = document.getElementById("audio"); 
let playlist = document.getElementById('playlist');
// querySelectorAll devuelve una lista de nodos iterable
let tracks = playlist.querySelectorAll('a'); 

audio.volume = 0.10; 
audio.play(); 

init();

function init() {
    // Recorrer con forEach
    tracks.forEach(function(track) { 
        track.addEventListener("click", function(e) {    
            e.preventDefault(); 
            let song = this.getAttribute('href');   
            run(song, audio, this); 
        }); 
    });
    
    // Asignar evento a audio
    audio.addEventListener('ended', function(e) {
        // Obtener índice de audio actual
        let index = Array.from(tracks).getIndex(track => track.href == audio.src);
        // Saber si se está encontrando, si se obtiene -1 quiere decir que no
        console.log(index);
        // Incrementar índice
        index ++;
        // Si se llegó al final
        if(index >= tracks.length) {
            // Reinicar la lista, volviendo a la primera canción
            index = 0;
        }
        // Obtener camción de acuerdo al índice
        let track = tracks[index];
        let song = track.href;
        // Reproducir siguiente canción
        run(song, audio, track);
    });
} 

function run(song, audio, link) { 
    let parent = link.parentElement;

    // Obtener elemento activo
    let item = playlist.querySelector('li.active');
    // Eliminar clase de elemento activo
    item.classList.remove('active');

    // Agregar active a siguiente elemento
    parent.classList.add("active"); 

    //tocar la cancion 
    audio.src = song; 
    audio.load(); 
    audio.play(); 
}
    audio {
display: block;
width: 100%;
max-width: 300px;
}

#playlist {
display: block;
width: 100%;
max-width: 300px;
padding: 10px 5px;
list-style: none;
}

a { 
text-decoration: none; 
} 

.active a { 
color: #5DB0E6; 
text-decoration: none; 
} 

li a {
color: #eeeedd; 
background: #333; 
padding: 5px; 
display: block; 
}
    <audio id="audio" preload="auto" tabindex="0" controls="" > 
  <source src="../audio/uno.mp3"> 
</audio>
    
    <ul id="playlist"> 
        
        <li class="active"> 
            <a href="../audio/uno.mp3">Audio uno</a> 
        </li> 
        
        <li>
            <a href="../audio/dos.mp3">Audio dos</a> 
        </li> 
        
        
    </ul>

    What if the index of the song being played is not found?

    Sometimes the browser will add protocol and domain to properties href, srcand the like, causing comparisons to fail. If so, you look up the index of the list item that has the active class and use it to advance playback.

    Change this line:

    let index = Array.from(tracks).getIndex(track => track.href == audio.src);

    For these two:

    let items = playlist.querySelectorAll('li');
let index = Array.from(items).getIndex(item => item.classList.contains('active'));

    The audio link is in the same position as the active element.

    • 2