使用JavaScript动态控制HTML5音频

我有一个包含大约10个缩略图的画廊，每个缩略图代表一首歌。 为了控制每个的播放，我设置了一个播放按钮以通过jQuery淡入。 在围绕Apple的开发中心进行一些挖掘之后，我找到了一些原生的JavaScript来控制音频。 它工作得很漂亮，但是为了一次控制一个对象而编写。 我想做的是将其重写为一个动态控制您选择的缩略图的播放/暂停的function。

下面是我发现的代码..工作，但是编写它10次是很多不必要的代码。

感谢您的帮助和建议，永远！

HTML：

JavaScript的：

  function playPause() { var song = document.getElementsByTagName('audio')[0]; if (song.paused) song.play(); else song.pause(); }  

Answer 1

jQuery对于这类事情很棒。 它使您能够根据元素与DOM树中其他元素的关系轻松操作元素。 在您的示例中，您希望能够使元素仅影响单击时紧邻它们的元素。

您当前的Javascript代码的问题在于它实际上只抓取整个页面上的第一个音频元素。

以下是如何更改代码以支持无限数量的 & 对。

1. 在标签中添加一个类（在我的示例中为’playback’）
2. 用’＃’替换href属性
3. 然后使用jQuery将处理程序附加到具有该类的元素的click事件。

HTML

使用Javascript