Ya me ha pasado varias veces que al usar un href="#" (otras redirecciones href me funcionan perfectamente). Ahora mismo he copiado y modificado un código de internet. Lo he simplificado al máximo y no me funciona.
songlist.onclick = function(e){
e.preventDefault();
var elm = e.target;
var audio = document.getElementById('audio');
var source = document.getElementById('player');
source.src = elm.getAttribute('data-value');
audio.load();
audio.play();
};
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Index</title>
<script src="index.js" type="text/javascript"></script>
</head>
<body>
<ul id="songlist" class="songlist">
<li>
<a href="#" data-value="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga">Cancion</a>
</li>
</ul>
<div>
<audio id="audio" controls="controls">
<source id="player" src=""></source>
- ERROR -
</audio>
</div>
</body>
</html>
Al ejecutarlo aquí, funciona perfectamente. Pero en local, en mi navegador, no hace nada. Supongo que es un problema de configuración, pero no sé cuál. He usado chrome, firefox y edge y el resultado es el mismo. He probado instalando xampp como servidor local apache y nada. En chrome, que es el que más utilizo, javascript está activado.
No sé que falla, ¿Ayuda?. Gracias.