[英]DOMException: Failed to load because no supported source was found in html file
im getting DOMException: Failed to load because no supported source was found in audio.play().我收到 DOMException: Failed to load because no supported source was found in audio.play(). im getting his issue on audioElement.src = 'songs/${index+1}.mp3';我在 audioElement.src = 'songs/${index+1}.mp3' 上遇到了他的问题;
console.log("Welcome to music player");
//initialize the Variables
let songIndex = 0;
audioElement = new Audio("songs/1.mp3");
let masterPlay = document.getElementById('masterPlay');
let myProgressBar = document.getElementById('myProgressBar');
let gif = document.getElementById('gif');
let masterSongName = document.getElementById('masterSongName');
let songItem = Array.from(document.getElementsByClassName('songItem'));
songs = [
{ songName: "closer - chainsmokers", filePath: "songs/1.mp3", coverPath: "1.jpg" },
{ songName: "a thousand years", filePath: "songs/2.mp3", coverPath: "2.jpg" },
{ songName: "Let me love you", filePath: "songs/3.mp3", coverPath: "3.jpg" },
{ songName: "someone you loved", filePath: "songs/4.mp3", coverPath: "4.jpg" },
{ songName: "Let me down slowly", filePath: "songs/5.mp3", coverPath: "1.jpg" },
{ songName: "stay - Justin beiber", filePath: "songs/6.mp3", coverPath: "1.jpg" },
]
songItem.forEach((element,i) => {
element.getElementsByTagName("img")[0].src=songs[i].coverPath;
element.getElementsByClassName("songName")[0].innerText=songs[i].songName;
})
masterPlay.addEventListener('click', () => {
if (audioElement.paused || audioElement.currentTime <= 0) {
audioElement.play();
masterPlay.classList.remove('fa-play-circle')
masterPlay.classList.add('fa-pause-circle')
gif.style.opacity = 1;
}
else {
audioElement.pause();
masterPlay.classList.remove('fa-pause-circle');
masterPlay.classList.add('fa-play-circle');
gif.style.opacity = 0;
}
})
audioElement.addEventListener('timeupdate',()=>{
console.log('timeupdate');
progress = parseInt((audioElement.currentTime/audioElement.duration)*100);
myProgressBar.value=progress;
})
myProgressBar.addEventListener('change',()=>{
audioElement.currentTime = myProgressBar.value * audioElement.duration/100;
})
const makeAllPlays = ()=>{
Array.from(document.getElementsByClassName('songItemPlay')).forEach((element)=>{
element.classList.remove('fa-pause-circle');
element.classList.add('fa-play-circle');
})
}
Array.from(document.getElementsByClassName('songItemPlay')).forEach((element)=> {
element.addEventListener('click',(e)=>{
console.log(e.target);
makeAllPlays();
index = parseInt(e.target.id);
e.target.classList.remove('fa-play-circle');
e.target.classList.add('fa-pause-circle');
audioElement.src = 'songs/${index+1}.mp3' ; // error generating on this line
masterSongName.innerText=songs[songIndex].songName;
audioElement.currentTime=0;
audioElement.play();
masterPlay.classList.remove('fa-pause-circle');
masterPlay.classList.add('fa-play-circle');
} )
})
document.getElementById('next').addEventListener('click',()=>{
if(songIndex>5){
songIndex=0;
}
else{
songIndex+=1;
}
audioElement.src = 'songs/${index}.mp3';
masterSongName.innerText=songs[songIndex].songName;
audioElement.currentTime=0;
audioElement.play();
masterPlay.classList.remove('fa-pause-circle');
masterPlay.classList.add('fa-play-circle');
})
document.getElementById('previous').addEventListener('click',()=>{
if(songIndex<=0){
songIndex=0;
}
else{
songIndex-=1;
}
audioElement.src = 'songs/${index}.mp3';
masterSongName.innerText=songs[songIndex].songName;
audioElement.currentTime=0;
audioElement.play();
masterPlay.classList.remove('fa-pause-circle');
masterPlay.classList.add('fa-play-circle');
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.