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();
            });

樣式略