音频播放器中的每首歌曲都可以更改背景颜色

Question

我想知道以下是否可行：

我有一个带有音频播放器的页面。每当一首歌自动改变或有人点击曲目列表中的一首歌时，我想让这首歌改变背景的颜色。背景是渐变动画。

1. 例如，Song 01 将有一个类 "sad," 并将背景更改为更深的颜色；
2. Song 02 将是 “happy”， 并将用更亮的颜色改变背景。

我会有很多不同的调色板，但我也想为歌曲分配一个特定的调色板（不是随机化的）。

到目前为止，下面的例子就是我所拥有的。在这个 JSFiddle 演示中，我可以在点击时更改背景，但不幸的是，当一首歌曲结束并自动播放下一首歌曲时，它不起作用。

http://jsfiddle.net/georgeyanakiev/ca9pmv4L/3/

<a href="#" onclick="bgFrame.className='happy'" data-src="SONG URL">SONG TITLE</a>

.happy { background: linear-gradient(270deg, #3e23ff, #3cff3c, #ff1962, #2dafe6); background-size: 600% 600%; -webkit-animation: Gradient 60s ease infinite; -moz-animation: Gradient 60s ease infinite; animation: Gradient 60s ease infinite; }

我将不胜感激一些帮助和建议！

亲切的问候。

Answer 1

您需要在 JavaScript 中执行此操作，因为我们需要找出当前歌曲何时更改以及何时发生更改，我们需要执行与您的 onclick="bgFrame.className='happy'" 等效的操作

您可以通过执行以下操作来实现：

var audio = document.getElementsByTagName('audio')[0];
var bgFrame = document.getElementById('bgFrame');

audio.addEventListener('ended', function(e){
    var playing = document.querySelector('li.playing');
    var playingSong = playing.querySelector('a');
    eval(playingSong.getAttribute('onclick'));
});

我们正在添加一个事件监听器，它检查当前歌曲何时为ended，当它被触发时，它会执行以下操作：

1. 查找正在播放列表项。
2. 在该列表项中找到 a 标记。
3. 找到a 标记的onclick 属性，然后在本质上运行该代码的对象上调用eval 并获得效果。

这里更新jsFiddle