Skip to content

Instantly share code, notes, and snippets.

@junlas
Last active March 2, 2018 05:23
Show Gist options
  • Save junlas/96f7d22fe9dff6ced265faa1b5b43e08 to your computer and use it in GitHub Desktop.
Save junlas/96f7d22fe9dff6ced265faa1b5b43e08 to your computer and use it in GitHub Desktop.
Dom Audio 以及 Web Audio 在微信网页上的播放管理工具类(自动播放,不需要点击播放)
import WeixinAudio from "../weixin/WeixinAudio";
import WeixinUtils from "../weixin/WeixinUtils";
export default class DomAudioGroup {
_audioUrl = null;
_endCallback = null;
_domAudio = null;
constructor(audioUrl) {
this._audioUrl = audioUrl;
this._domAudio = new Audio(this._audioUrl);
this._domAudio.loop = false;
this._domAudio.crossOrigin = 'anonymous';
this._domAudio.addEventListener('ended', this.endPlay.bind(this));
}
play() {
this.close();
if(WeixinUtils.isWeiXin()) {
new WeixinAudio(this.playDomAudio,this);
}else {
this.playDomAudio();
}
}
playDomAudio() {
this._domAudio.load();
this._domAudio.play();
}
endPlay(e){
if(this._endCallback) {
this._endCallback.call();
}
}
close() {
this._domAudio.pause();
}
}
import DomAudioGroup from "./DomAudioGroup";
export default class DomAudioGroupInstance {
static __instance;
_domAudioDict = null;
constructor() {
this._domAudioDict = {};
}
/**@type {DomAudioGroupInstance} */
static get instance() {
if(!DomAudioGroupInstance.__instance) {
DomAudioGroupInstance.__instance = new DomAudioGroupInstance();
}
return DomAudioGroupInstance.__instance;
}
play(/**@type {string}*/audioUrl,endCallback = null,isStopAll = true) {
if(isStopAll) {
this.stopAll();
}
let domAudioGroup = this._domAudioDict[audioUrl];
if(!domAudioGroup) {
domAudioGroup = new DomAudioGroup(audioUrl);
this._domAudioDict[audioUrl] = domAudioGroup;
}
domAudioGroup._endCallback = endCallback;
domAudioGroup.play();
}
stopAll() {
for(let k in this._domAudioDict) {
let domAudioGroup = this._domAudioDict[k];
if(domAudioGroup) {
domAudioGroup.close();
}
}
}
}
import WeixinAudio from "../weixin/WeixinAudio";
import WeixinUtils from "../weixin/WeixinUtils";
export default class WebAudioGroup {
_audioUrl = null;
_endCallback = null;
__audioWeb = null;
/**@type {number} */
__audioCurrent = 0;
_domAudio = null;
_autoPlay = true;
constructor(audioUrl) {
this._audioUrl = audioUrl;
cc.loader.load(this._audioUrl,(err,audio)=>{
if(err) {
cc.error("[AudioGroup.js]load mp3 url error=>",err);
}else {
this.__audioWeb = audio;
if(this._autoPlay) {
this.play();
}
}
});
}
play() {
this.close();
if(this.__audioWeb) {
if(WeixinUtils.isWeiXin()) {
new WeixinAudio(this.playWebAudio,this);
}else {
this.playWebAudio();
}
}else {
this._autoPlay = true;
}
}
playWebAudio() {
this.__audioCurrent = cc.audioEngine.play(this.__audioWeb,false,1);
if(this._endCallback) {
cc.audioEngine.setFinishCallback(this.__audioCurrent, ()=>{
this._endCallback.call();
});
}
}
close() {
cc.audioEngine.stop(this.__audioCurrent);
}
}
import WebAudioGroup from "./WebAudioGroup";
export default class WebAudioGroupInstance {
static __instance;
_webAudioDict = null;
constructor() {
this._webAudioDict = {};
}
/**@type {WebAudioGroupInstance} */
static get instance() {
if(!WebAudioGroupInstance.__instance) {
WebAudioGroupInstance.__instance = new WebAudioGroupInstance();
}
return WebAudioGroupInstance.__instance;
}
play(/**@type {string}*/audioUrl,endCallback = null,isStopAll = true) {
if(isStopAll) {
this.stopAll();
}
let webAudioGroup = this._webAudioDict[audioUrl];
if(!webAudioGroup) {
webAudioGroup = new WebAudioGroup(audioUrl);
this._webAudioDict[audioUrl] = webAudioGroup;
}
webAudioGroup._endCallback = endCallback;
webAudioGroup.play();
}
stopAll() {
for(let k in this._webAudioDict) {
let webAudioGroup = this._webAudioDict[k];
if(webAudioGroup) {
webAudioGroup.close();
}
}
}
}
export default class WeixinAudio {
__callback = null;
__thisObject = null;
constructor(callback,thisObject){
this.__callback = callback;
this.__thisObject = thisObject;
if(CC_DEBUG) {
this.__callback.call(this.__thisObject);
return;
}
try {
this.init();
} catch (error) {
console.error("[WeixinJSBridge]error:",error);
document.addEventListener("WeixinJSBridgeReady", ()=> {
console.log("-------eventlistener caller-----");
this.init();
});
}
}
init(){
WeixinJSBridge.invoke('getNetworkType', {}, (e)=> {
this.__callback.call(this.__thisObject);
this.__callback = null;
this.__thisObject = null;
});
}
}
export default class WeixinUtils {
//功能菜单:
static MenuItems = [
"menuItem:share:qq",//分享到QQ
"menuItem:share:weiboApp",//分享到Weibo
"menuItem:favorite",//收藏
"menuItem:share:facebook",//分享到FB
"menuItem:share:QZone",//分享到 QQ 空间
"menuItem:editTag",//编辑标签
"menuItem:delete",//删除
"menuItem:copyUrl",//复制链接
"menuItem:originPage",//原网页
"menuItem:readMode",//阅读模式
"menuItem:openWithQQBrowser",//在QQ浏览器中打开
"menuItem:openWithSafari",//在Safari中打开
"menuItem:share:email",//邮件
"menuItem:share:brand"//一些特殊公众号
];
//功能菜单:备份列表
static MenuItems_Backup = [
"menuItem:share:appMessage",//发送给朋友
"menuItem:share:timeline",//分享到朋友圈
"menuItem:share:qq",//分享到QQ
"menuItem:share:weiboApp",//分享到Weibo
"menuItem:favorite",//收藏
"menuItem:share:facebook",//分享到FB
"menuItem:share:QZone",//分享到 QQ 空间
"menuItem:editTag",//编辑标签
"menuItem:delete",//删除
"menuItem:copyUrl",//复制链接
"menuItem:originPage",//原网页
"menuItem:readMode",//阅读模式
"menuItem:openWithQQBrowser",//在QQ浏览器中打开
"menuItem:openWithSafari",//在Safari中打开
"menuItem:share:email",//邮件
"menuItem:share:brand"//一些特殊公众号
];
/**是否屏蔽微信环境下的基础菜单功能 */
static showOrHideBaseMenuItem(/**@type {boolean}*/isShow){
if(isShow) {
wx.showAllNonBaseMenuItem();//显示所有功能按钮接口
}else {
wx.hideAllNonBaseMenuItem();//隐藏所有非基础按钮接口,“基本类”按钮详见附录3
}
}
/**屏蔽微信环境下的右上角,分享功能 */
static blockShare(){
try {
if(WeixinUtils.isWeiXin()) {
function onBridgeReady() {
WeixinJSBridge.call('hideOptionMenu');
}
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
} else {
onBridgeReady();
}
}
WeixinJSBridge.invoke('getNetworkType',{},function(e){
// 在这里拿到e.err_msg,这里面就包含了所有的网络类型
console.log(e.err_msg);
//e.err_msg的取值如下所示: network_type:wifi wifi网络 2 network_type:edge 非wifi,包含3G/2G 3 network_type:fail 网络断开连接 4 network_type:wwan 2g或者3g
});
} catch (error) {
console.log("Weixin error:"+error);
}
}
/**@return {string} */
static getQueryString(url, name) {
var reg = new RegExp("(^|&|\\?)" + name + "=([^&]*)(&|$)", "i");
var r = url.substr(1).match(reg);
if (r != null) return decodeURIComponent(r[2]); return null;
}
/**@return {boolean} */
static isWeiXin() {
var ua = navigator.userAgent.toString();
var str=ua.match(/MicroMessenger/i);
if(str=="MicroMessenger") {
return true;
} else {
return false;
}
}
}
@junlas
Copy link
Author

junlas commented Mar 1, 2018

使用方法:

WebAudioGroupInstance.instance.play(this.englishArrVo[data${this.currIndex}].audio_url);

或者:

DomAudioGroupInstance.instance.play(this.englishArrVo[data${this.currIndex}].audio_url);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment