使用 JavaScript 动态控制 HTML5 音频 [英] Dynamically control HTML5 audio with JavaScript

问题描述

我有一个画廊，里面有 10 个左右的缩略图，每个缩略图代表一首歌.为了控制每个的播放，我设置了一个播放按钮以通过 jQuery 淡入.在对 Apple 的 Dev Center 进行了一番挖掘之后，我发现了一些本机 JavaScript 来控制音频.它工作得很好，但它是为一次控制一个对象而编写的.我想要做的是将它重写为一个动态控制您选择的缩略图的播放/暂停的函数.

下面是我发现的代码..有效，但写 10 次就会有很多不必要的代码.

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

HTML:

 
<a href="javascript:playPause();"><img id="play" src="../images/icons/35.png"/></a><audio id="狗仔队"><source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg"/><source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg"/>您的浏览器不支持 HTML5 音频.

JavaScript:

解决方案

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

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

以下是如何更改代码以支持无限数量的 &<audio> 对.

1. 向 <a> 标记添加一个类(在我的示例中为播放")
2. 用#"替换 href 属性
3. 然后使用 jQuery 将处理程序附加到具有该类的元素的单击事件.

HTML

<a class="playback" href="#"><img id="play" src="../images/icons/35.png"/></a><audio id="狗仔队"><source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg"/><source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg"/>您的浏览器不支持 HTML5 音频.

Javascript

I've got a gallery of sorts with 10 or so thumbnails that each represent one song. To control the playback of each, I've set a play button to fades in via jQuery. After some digging around Apple's Dev Center I found some native JavaScript to control audio. It works beautifully, but is written for control of one object at a time. What I'd like to do is rewrite it as one function that dynamically controls the playback/pause of the thumbnail you're selecting.

Below is the code that I found.. works, but it'd be a lot of unnecessary code to write it 10 times.

Thanks for your help and advice, always!

HTML:

    <div class="thumbnail" id="paparazzixxx">
        <a href="javascript:playPause();">
            <img id="play" src="../images/icons/35.png" />
        </a>
        <audio id="paparazzi">
            <source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
            <source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
            Your browser does not support HTML5 audio.
        </audio>
    </div>

JavaScript:

<script type="text/javascript">
       function playPause() {
       var song = document.getElementsByTagName('audio')[0];
       if (song.paused)
           song.play();
       else
           song.pause();
       }
</script>

解决方案

jQuery is awesome for this sort of thing. It gives you the ability to easily manipulate elements based on their relationship to other elements in the DOM tree. In your example you want to be able to make the <a> elements only affect the <audio> elements that are right next to them when clicked.

The problem with your current Javascript code is that it is actually just grabbing only the first audio element on the entire page.

Here's how you can change your code to support an unlimited number of <a> & <audio> pairs.

1. Add a class to the <a> tag ('playback' in my example)
2. Replace the href attribute with a '#'
3. Then use jQuery to attach a handler to the click event for elements with that class.

HTML

<div class="thumbnail" id="paparazzixxx">
    <a class="playback" href="#">
        <img id="play" src="../images/icons/35.png" />
    </a>
    <audio id="paparazzi">
        <source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
        <source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
        Your browser does not support HTML5 audio.
    </audio>
</div>

Javascript

<script type="text/javascript">
   $(function() {
     $(".playback").click(function(e) {
       e.preventDefault();

       // This next line will get the audio element
       // that is adjacent to the link that was clicked.
       var song = $(this).next('audio').get(0);
       if (song.paused)
         song.play();
       else
         song.pause();
     });
   });
</script>

这篇关于使用 JavaScript 动态控制 HTML5 音频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！