有關Js控制元件
阿新 • • 發佈:2018-12-16
直接看程式碼,可以自己試試~!!
這個控制元件主要是聲音播放,成功or失敗播放相應小型音訊資源~!
/** @author Bill 呼叫: container : 容器資訊, 通過dom->id繫結 <input id="xxxx"></input> showControls : 是否顯示面板 source : 資源路徑 注意配置好聲音資源路徑 var video1 = new Ring({container:"test",showControls:true,source:"song.mp3"}); video1.ring(1); // 1 OR 2 */ window.Ring = function (param) { this.container = param.container; this._controls = param.showControls ? 'controls' : false; //是否顯示播放器面板 this._succSource = param.succSource ? param.succSource : "/Public/Common/ring/succ.wav"; this._errSource = param.errSource ? param.errSource : "/Public/Common/ring/error.wav"; this._ringPlay = null; this._video = null; this._init(); }; Ring.prototype = { constructor: Ring, _init: function () { var ring = this.createVideo(); this.appendVideoToContainer(ring); }, appendVideoToContainer:function (Ring) { if(!Ring){ alert("鈴聲未成功初始化!"); return false; } document.getElementById(this.container).appendChild(Ring); }, createVideo:function(){ var video = document.createElement("AUDIO"); video.controls = this._controls; var _id = this.container + "_" + "video"; video.setAttribute("id",_id); this._ringPlay = _id; this._video = video; return video; }, ring:function(type){ var _video = this.getVideoElement(); if(type == 1){ _video.src = this._succSource; } if(type == 2){ _video.src = this._errSource; } var playVideo = document.getElementById(this._ringPlay); playVideo.play(); }, getVideoElement:function(){ return this._video; } };
注意仔細閱讀!!!