javascript - audio标签控制播放暂停？

问题描述

问 题

  <li><audio loop="" src="video/demo.mp3"  preload=""></audio></li>
  <li><audio loop="" src="video/demo.mp3"  preload=""></audio></li>
  <li><audio loop="" src="video/demo.mp3"  preload=""></audio></li>
  <li><audio loop="" src="video/demo.mp3"  preload=""></audio></li>
  <li><audio loop="" src="video/demo.mp3"  preload=""></audio></li>
      
      
      
      
 //疑惑：下面循环添加的ID播放报错，单个添加 正常
    //var lengthLi = $('.m-alert-choose-video .hd ul li').length;
    // for (var i = 0; i < lengthLi + 1; i++) {

    //     $(".m-alert-choose-video .hd ul li:eq(" + i + ") audio").attr("id", "media" + (i + 1) + "'");
    // }
    $(".m-alert-choose-video .hd ul li:eq(0) audio").attr("id", "media1");
    $(".m-alert-choose-video .hd ul li:eq(1) audio").attr("id", "media2");

    $('.m-alert-choose-video .hd ul li').click(function() {
        //播放暂停切换  
        //问：当前播放其他的audio元素  清除播放状态

        function playAudio() {
            if (audio.paused) {
                audio.play();
                $(audio).html('Pause');
            } else {
                audio.pause();
                $(audio).html('Play');
            }
        }

        var _this = $(this).index() + 1;
        var audio = document.getElementById('media' + _this);
        playAudio()
    });

解决方案

//播放/暂停当前
function playAudio(audio) {

    var audio = audio.find("audio");
    audio = audio[0];
    if (audio.paused) {
        audio.play();

        } else {
            audio.pause();
                audio.currentTime = 0;
        }
    }

    function plays(elmClass, emlID) {
        var lengthLi = $(elmClass).length;
        for (var i = 0; i < lengthLi + 1; i++) {
            $(elmClass + ":eq(" + i + ") audio").attr("id", emlID + (i + 1));
        }
        $(elmClass).click(function() {
            // $('audio').html() == '1';
            pauseAllAudio($(this).find("audio"), elmClass + ' audio');
            playAudio($(this))
        });
    }

    function playAudioEnd(audio) {
        var audio = audio.find("audio");
        audio = audio[0];
        audio.pause();
    }
    //函数调用
    plays('.m-alert-choose-video ul li', 'media');
    $('.m-alert-choose-video .m-btn-verified').click(function() {
        $('.m-alert-choose-video ul li').each(function() {
            playAudioEnd($(this));
        });

    });

这篇关于javascript - audio标签控制播放暂停？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！