zoukankan      html  css  js  c++  java
  • 前端音频播放与暂停deom

    $(document).ready(function(){
            //彩铃逻辑
            // console.log($(".ringstone_audio").length)
            if($(".ringstone_audio").length>0){//online_id:3400
            var ringstone_audio = $(".ringstone_audio").attr("data-audio");
                $("#slider").append('
                    <div class="ringtone ringtone_start">
                    <audio  id="ringtone" src="'+ringstone_audio + '" controls="controls" hidden>
                        您的浏览器不支持 audio 标签。
                    </audio>
                    </div>
                ')
                var ring_status = true;
                $(".ringtone").click(function(){
                    playOrPause("ringtone");
                    if(ring_status){
                    $(".ringtone").removeClass("ringtone_start").addClass("ringtone_pause");
                    }else{
                    $(".ringtone").removeClass("ringtone_pause").addClass("ringtone_start");
                    }
                    ring_status = !ring_status;
                })
                // //监听播放完成
                $("#ringtone")[0].addEventListener('ended', function () {
                    ring_status = true;
                    $(".ringtone").removeClass("ringtone_pause").addClass("ringtone_start");
                })
            }
        })
    //控制音频
    function playOrPause(elemId,type) {
        var elem = document.getElementById(elemId);
        if(elem){
            if (elem.paused) {
                elem.play();
            }
            else {
                elem.pause();
            }
        }
    }
  • 相关阅读:
    [07] Redis 持久化
    [06] Redis 事务
    [05] Jedis
    [04] Redis 配置文件
    [03] Redis 数据类型
    [02] Redis 简介&安装
    [01] NoSQL 简介
    06-NULL&typedef
    05-动态内存分配
    朴素贝叶斯分类器Naive Bayes
  • 原文地址:https://www.cnblogs.com/ivan5277/p/12877286.html
Copyright © 2011-2022 走看看