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

问题描述

我有各种各样的与10个左右的缩略图，每重present一首歌的画廊。要控制每个回放，我给自己定一个播放按钮通过jQuery来变淡英寸围绕苹果公司的开发中心一些挖后，我发现了一些本地JavaScript来控制音频。它的工作原理精美，但对于一次一个对象的控制被写入。我想要做的就是把它改写为一个函数，动态地控制你选择缩略图的播放/暂停。

下面是code，我发现..作品，但它会是一个很多不必要的code来编写它的10倍。

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

HTML

 ＆LT; D​​IV CLASS =缩略图ID =paparazzixxx＆GT;
        ＆所述; A HREF =JavaScript的：playPause（）;＆GT;
            ＆LT; IMG ID =玩SRC =../图像/图标/ 35.png/＆GT;
        ＆所述; / A＆GT;
        ＆LT;音频ID =狗仔队＆GT;
            ＆lt;信源SRC =../音频/ fernando_garibay_paparazzisnlmix.oggTYPE =音频/ OGG/＆GT;
            ＆lt;信源SRC =../音频/ fernando_garibay_paparazzisnlmix.mp3TYPE =音频/ MPEG/＆GT;
            您的浏览器不支持HTML5音频。
        ＆LT; /音频＆GT;
    ＆LT; / DIV＆GT;
 

JavaScript的：

 ＆LT;脚本类型=文/ JavaScript的＆GT;
       功能playPause（）{
       VAR歌= document.getElementsByTagName（'声音'）[0];
       如果（song.paused）
           song.play（）;
       其他
           song.pause（）;
       }
＆LT; / SCRIPT＆GT;
 

解决方案

jQuery是真棒对于这样的事情。它可以让你轻松地操纵基于其在DOM树等元素的关系内容的能力。在你的榜样，你希望能够使＆LT; A＆GT; 元素不仅影响到＆LT;音频＆GT; 元素点击时旁边，是他们的权利。

与您当前的Javascript code的问题是，它实际上只是整个页面上只抓住第一个音频元素。

下面是你如何可以改变你的code：支持＆LT的数量不受限制; A＆GT; ＆安培; ＆LT;音频＆GT; 对

。

1. 添加类到＆LT; A＆GT; 标记（'播放'在我的例子）


2. 以＃替换href属性


3. 然后使用jQuery处理程序附加到Click事件与该类元素。

HTML

 ＆LT; D​​IV CLASS =缩略图ID =paparazzixxx＆GT;
    ＆LT;一类=播放的href =＃＆GT;
        ＆LT; IMG ID =玩SRC =../图像/图标/ 35.png/＆GT;
    ＆所述; / A＆GT;
    ＆LT;音频ID =狗仔队＆GT;
        ＆lt;信源SRC =../音频/ fernando_garibay_paparazzisnlmix.oggTYPE =音频/ OGG/＆GT;
        ＆lt;信源SRC =../音频/ fernando_garibay_paparazzisnlmix.mp3TYPE =音频/ MPEG/＆GT;
        您的浏览器不支持HTML5音频。
    ＆LT; /音频＆GT;
＆LT; / DIV＆GT;
 

的JavaScript

 ＆LT;脚本类型=文/ JavaScript的＆GT;
   $（函数（）{
     $（回放）。点击（函数（五）{
       亦即preventDefault（）;       //下面一行将获得音频元素
       //邻近于被点击的链接。
       VAR歌= $（本）。接下来（'声音'）得到（0）;
       如果（song.paused）
         song.play（）;
       其他
         song.pause（）;
     }）;
   }）;
＆LT; / SCRIPT＆GT;
 

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屋！