最近

Paste_Image.png

最近做移动端小项目需要用到audio标签，完成如图中这样的场景。就是每个item代表一位参赛作者的录音作品，通过点击图中的绿色横条来播放录音。一个item的代码结构如下:

    

       ![](/Public/..//uploads/activity_for_xqb/image/7sKQcVChE6_6KUyeBe7Z2nsL3WjgitIVr27RnoeF9WG_8ZTGIKtmqg-h_y6hsGzl.jpg)
       ![](/Public/images/signUp/num1.png)
    
    

        5
        成人D
        14票
        
        

            ![](/Public/images/signUp/oval.png)
        
    
    

       ![](/Public/images/choose.png)
    

我是通过在p标签上绑定listItemClick方法来触发录音播放，最开始自己想到的办法是先获取页面上所有的audio标签，然后用for循环遍历它们，再判断是否处于暂停状态，如果不是暂停状态就让之前的audio标签执行pause()方法来暂停播放，代码为：

function listItemClick(audio,tag) {
            $(".oval").removeClass("slow");
            $(tag).find(".oval").addClass("slow");
            var autoArr = document.getElementsByTagName("audio"),
             len = autoArr.length;
                for(var i=0;i

这样做的缺点就是每点击一次就会额外生成一个audio标签，这在移动端太不友好了，后来飞哥写了一种简单的方法：

   var audioDom;
   function listItemClick(audio,tag) {
            $(".oval").removeClass("slow");
            $(tag).find(".oval").addClass("slow");
            if (!audioDom) {
                audioDom = document.createElement("audio");
                document.body.appendChild(audioDom);
            }
            audioDom.src = audio;
            audioDom.play();
            audioDom.addEventListener('ended', function () {
                $(".oval").removeClass("slow");
            }, false);
        }

先定义了一个全局变量audioDom，然后点击的时候通过判断audioDom是否存在来确定需不需要创建新的audio标签，这样保证到头来只创建了一个audio标签，只通过更改audio.src属性就能达到效果，蛮6的。