zoukankan      html  css  js  c++  java
  • audio的总结

    H5的audio谁都会用, 照着官方api放个标签, play, stop...

    实际运用中需要一些兼容性封装:

    //audio
                $.audio = function(params) {
                    var $audio = {};
                    $audio.methods = {
                        init: function() {
                            this.loop = params.loop || '';
                            this.id = params.id || '';
                            this.volume = params.volume || 1;
                            this.mp3 = params.mp3 || '';
                            this.ogg = params.ogg || '';
                            var audioHtml = '<audio id="' + this.id + '" autoplay="autoplay" loop src="' + this.mp3 + '" preload="auto"></audio>';
                            $(".music").append(audioHtml);
                        },
                        play: function() {
                            document.getElementById(this.id).play();
                        },
                        stop: function() {
                            document.getElementById(this.id).pause();
                        },
                        soundVolume: function(value) {
                            document.getElementById(this.id).volume = value;
                        },
                        delAudio: function() {
                            $("#" + this.id).remove();
                        }
                    };
                    $audio.methods.init();
                    return $audio.methods;
                };

    调用的时候, 分为初始化,判断微信浏览器,

     audio = new $.audio({ id: "sound", mp3: "images/britax.mp3", loop: "loop" });
                audio.play();
                getWechatVersion();
                if (getWechatVersion()) {
                    audio.stop();
                    $('.playon').show();
                    $('.playoff').hide();
                }

    以及事件的绑定:

    $('.playon').click(function() {
                    audio.stop();
                    $('.playon').hide();
                    $('.playoff').show();
                });
                $('.playoff').click(function() {
                    audio.play();
                    $('.playon').show();
                    $('.playoff').hide();
                });

    样式略

  • 相关阅读:
    嗨分享-前端技术-帝国CMS手机站修改列表分页(sysShowListMorePage)
    外观模式
    模版方法模式
    原型模式(克隆)
    策略模式
    装饰模式和代理模式
    设计原则
    工厂模式
    反射机制
    vmware RHEL6.x 开启FTP和TELNET服务--root权限
  • 原文地址:https://www.cnblogs.com/haimingpro/p/6908216.html
Copyright © 2011-2022 走看看