网页制作-音乐播放功能（二）

点击按钮实现播放音乐的切换

实现目标：1.点击左右按钮，实现音乐切换到上一首/下一首。2.同时实现音乐条上歌曲信息的更新。

​​

实现思路：1.实现音乐的切换本质上就是替换html文件中 <audio>元素的src属性值。

<audio src="./audio/起风了-权三岁.mp3" id="domMusic"></audio>

2.因此，可以创建一个二维数组，存储音乐的地址、歌曲名称、歌手名称。同时声明一个变量currentSong，来跟踪音乐播放位置。

3.所以我们创建三个主要函数：

（1）用来更新歌曲信息的函数updateSongInfo(index)：通过函数传入的索引值，更新歌曲名字、歌手姓名、音乐图片。

（2）将歌曲切换到上一首prevSong（）：实现变量currentSong--，然后调用updateSongInfo(currentSong)更新相关信息。

（3）将歌曲切换到下一首nextSong（）:与prevSong（）同理。

具体实现代码js：

// 更新歌曲信息

function updateSongInfo(index) {

 let wordsElement = document.querySelector('.words');

 if (wordsElement) {

  var songNameElement = wordsElement.querySelector('.song_name');

  var imgElement = document.querySelector('.music_icon img');

  if (songNameElement) {

   songNameElement.title = Array_songs[index][1]; // 修改title属性

   songNameElement.textContent = Array_songs[index][1]; // 修改文本内容

   imgElement.src='./images/song_img'+(index+1)+'.jpg';

  }

  var singerElement = wordsElement.querySelector('.singer');

  var imgElement = document.querySelector('.music_icon img');

  if (singerElement) {

   singerElement.title = Array_songs[index][2]; // 修改title属性

   singerElement.textContent = Array_songs[index][2]; // 修改文本内容

  }

 }

}
// 定义上一首的点击事件处理函数

function prevSong() {

 song_end();

 console.log('上一首被点击');

 currentSong--;

 if (currentSong < 0) {

  currentSong = Array_songs.length - 1;

 }

 domMusic.src = './audio/'+Array_songs[currentSong][0];

 domMusic.load();

 updateSongInfo(currentSong);

 playBtn.className='pause';

}

// 定义下一首的点击事件处理函数

function nextSong() {

 song_end();

 console.log('下一首被点击');

 currentSong++;

 if (currentSong === Array_songs.length) {

  currentSong = 0;

 }

 domMusic.src =  './audio/'+Array_songs[currentSong][0];

 domMusic.load();

 updateSongInfo(currentSong);

 playBtn.className='pause';

 

}

//

domMusic.addEventListener('canplay', function() {//在音频可以播放的第一时间执行操作

 initTime(); // 加载完成后初始化时长显示

});

// 获取上一首和下一首的元素

let prevBtn = document.querySelector('a.prev');

let nextBtn = document.querySelector('a.nxt');

prevBtn.addEventListener('click', prevSong);

nextBtn.addEventListener('click', nextSong);