继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JQ和原生JS监听audio播放停止事件

holdtom
关注TA
已关注
手记 1703
粉丝 240
获赞 991


原生JS:

function control_f(){

    var audio_f = document.getElementById('music_f');

    var audioimg_f = document.getElementById('audioimg_f');

    if(audio_f!==null){

        if(audio_f.paused){

            audio_f.play();

            audioimg_f.src=images[0];

        }else{

            audio_f.pause();

            audioimg_f.src=images[1];

        }

    }

        {//监听语音结束

    audio_f.addEventListener('ended', function () {

        audioEnded();

    }, false);

    function audioEnded() {

        audioimg_f.src=images[1];

    }

}

JQ:

  //语音试听按钮

        $('.ll-audio-btn').click(function () {

            var bb = $(this).siblings('.ll-audio')[0];

            if($(this).hasClass('open')){

                $(this).text('暂停');

                bb.play();

                $(this).removeClass('open');

            }else{

                $(this).addClass('open');

                $(this).text('试听');

                bb.pause();

            }

            (function($){//监听语音结束

                bb.addEventListener("ended",function(){

                    $(this).siblings('.ll-audio-btn').addClass('open');

                    $(this).siblings('.ll-audio-btn').text('试听');

                    bb.pause();

                },false);

            })(jQuery);

        });

©著作权归作者所有:来自51CTO博客作者walkman2015的原创作品,如需转载,请注明出处,否则将追究法律责任


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP