手记

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


原生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的原创作品,如需转载,请注明出处,否则将追究法律责任


0人推荐
随时随地看视频
慕课网APP