音乐播放器点击play按钮后封面不旋转、music-info区块不显示问题求助

1. 修复JS逻辑缺失问题 #

当前JS代码仅做了类名切换，缺少音频控制逻辑，且未定义pauseSong函数，直接调用会导致逻辑中断，替换对应JS代码即可：

// 补充pauseSong函数，完善playSong逻辑
function playSong(){
    musicContainer.classList.add('play');
    playBtn.querySelector('i.fas').classList.remove('fa-play');
    playBtn.querySelector('i.fas').classList.add('fa-pause');
    audio.play();
}
function pauseSong(){
    musicContainer.classList.remove('play');
    playBtn.querySelector('i.fas').classList.remove('fa-pause');
    playBtn.querySelector('i.fas').classList.add('fa-play');
    audio.pause();
}

2. 修复HTML中id绑定错误 #

错误将id="cover"绑定到了进度条元素上，导致JS无法正确获取封面图片元素：

• 删除<div class="progress" alt="music-cover" id="cover"></div>上的id="cover"属性
• 给.img-container下的img标签添加id，修改为<img src="ukelele.jpg" id="cover">

3. 修复CSS过渡语法错误 #

.music-info的过渡属性存在拼写错误，导致信息栏显示动画失效，替换对应行即可：

.music-info {
  /* 把原来的transition行替换成下面的 */
  transition: transform 0.3s ease-in, opacity 0.3s ease-in;
}

以上三处修改完成后，点击播放按钮即可触发封面旋转、音乐信息栏上浮的效果，同时音频也会正常播放。

内容的提问来源于stack exchange，提问作者Ashley