最近

Paste_Image.png

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

<div class="problemContent1 wrap">
    <div class="mr">
       ![](/Public/..//uploads/activity_for_xqb/image/7sKQcVChE6_6KUyeBe7Z2nsL3WjgitIVr27RnoeF9WG_8ZTGIKtmqg-h_y6hsGzl.jpg)
       ![](/Public/images/signUp/num1.png)
    </div>
    <div class="wrap-content info">
        <span class="num">5</span>
        <span>成人D</span>
        <span id="voteAdd5" class="fr">14票</span>
        <!--播放录音-->
        <p class="record color1" onclick="listItemClick( '/Public/..//uploads/activity_for_xqb/ZONbV7fTuvpEawdpR1lFrO43P7TQrkoJUbcPozJuXrYM0sNul4YQHaFNtnzhGOBV.mp3',this)">
            ![](/Public/images/signUp/oval.png)
        </p>
    </div>
    <div class="choose">
       ![](/Public/images/choose.png)
    </div>
</div>

我是通过在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<len;i++){
                    if(!autoArr[i].paused){
                        autoArr[i].pause();
                    }
                }
            var autoAudio = document.createElement("audio");
            autoAudio.src = audio;
            autoAudio.play();
            document.body.append(autoAudio);
            audioDom.addEventListener('ended', function (){
                $(".oval").removeClass("slow");
            }, false);
        }

这样做的缺点就是每点击一次就会额外生成一个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的。