原生js插件 wx-audio （仿微信公众号组件）
最近在做一个小功能，电台的语音播放，除了箭头指着的进度条，其他都是自己手写的样式，下面说一下进度条的实现，使用插件 wx-audio
安装
npm 安装
npm install @dw/wx-audio
引入
import WxAudio from '@dw/wx-audio/lib/wx-audio.css'
import WxAudio from '@dw/wx-audio'
普通资源引入,先将lib文件下的目录放到自己的项目中，然后根据路径引入
<link href="./wx-audio.css" rel="stylesheet">
<script type="text/javascript" src="wx-audio.js"></script>
文件可自行下载
HTML中在需要生成进度条的地方写一个标签：<div id="textaudio1" style="height: auto; width: 100%;"></div>
使用方法
实例化 音乐组件 （这个audioPlay() 貌似需要放在微信的wx.config下面才能用，所以要先注册一下微信的config，在
wx.ready里面使用，我这个页面做的有微信分享功能，直接在里面调用了，下面贴上我的这部分完整代码
）
wx.config({ //sign为getsign接口返回的数据
debug: false,
appId: sign.appId,
timestamp: sign.timestamp,
nonceStr: sign.nonceStr,
signature: sign.signature,
jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"]
})
var src = _this2.articledetail.vid //这里为我另一个接口返回的MP3路径
console.log(src)
var isAudio = new WxAudio({
ele: "#textaudio1", //挂在的id为textaudio1的元素
title: "",
disc: "",
src,
width: "100%",
loop: true,
ended: function () {},
});
console.log(isAudio)
isAudio.audioPlay(); //播放
这样做之后，就会在指定的位置生成上面图片中的进度条及下面的时间，进度条可拖拽。
没翻到cdn ，手里有css 和 js文件，索性直接贴上代码，点击 + 展开代码
wx-audio.css
@keyframes slidein { 0% { -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } .wx-audio-content { user-select: none; width: 100%; display: flex; align-items: center; justify-content: center; min-height: auto; padding: 8px 12px; /* border: 1px solid #efefef; */ margin: 0 auto; font-size: 0; box-sizing: border-box; font-family: 'PingFangSC-Regular'; -webkit-tap-highlight-color: transparent; /* background: #fdfdfd; */ } .wx-audio-content p { margin: 0; } .wx-audio-content .wx-audio-info { display: none; } .wx-audio-content .wx-audio-left { display: inline-block; width: 42px; height: 100%; display: none } .wx-audio-content .wx-audio-left .wx-audio-state { width: 100%; height: 100%; display: none } .wx-audio-content .wx-audio-right { display: inline-block; width: calc(100% - 42px); font-size: 16px; box-sizing: border-box; padding-left: 10px; } .wx-audio-content .wx-audio-right .wx-audio-title { padding-bottom: 6px; width: 100%; font-size: 16px; font-weight: 400; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: none } .wx-audio-content .wx-audio-right .wx-audio-disc { width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding-bottom: 10px; font-size: 12px; color: #8c8c8c; display: none } .wx-audio-content .wx-audio-right .wx-audio-progrees { height: 2px; width: calc(100% - 4px); position: relative; } .wx-audio-content .wx-audio-right .wx-audio-progrees .wx-progrees-detail { height: 100%; width: 100%; background: #ebebeb; position: relative; cursor: pointer; } .wx-audio-content .wx-audio-right .wx-audio-progrees .wx-progrees-detail .wx-voice-p { width: 0%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; background: #FF9424; z-index: 2; } .wx-audio-content .wx-audio-right .wx-audio-progrees .wx-progrees-detail .wx-buffer-p { width: 0%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; background: #d9d9d9; z-index: 1; } .wx-audio-content .wx-audio-right .wx-audio-progrees .wx-progrees-detail .wx-loading { display: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; } .wx-audio-content .wx-audio-right .wx-audio-progrees .wx-progrees-detail .wx-loading .wx-loading-wrapper { position: absolute; top: 0; bottom: 0; left: 0; animation: slidein 6s linear infinite normal; -webkit-animation: slidein 6s linear infinite normal; -moz-animation: slidein 6s linear infinite normal; width: 200%; max-width: none !important; background-image: -owg-repeating-linear-gradient(-15deg, #d9d9d9, #d9d9d9 2px, #ebebeb 2px, #ebebeb 4px); background-image: -webkit-repeating-linear-gradient(-15deg, #d9d9d9, #d9d9d9 2px, #ebebeb 2px, #ebebeb 4px); background-image: -moz-repeating-linear-gradient(-15deg, #d9d9d9, #d9d9d9 2px, #ebebeb 2px, #ebebeb 4px); background-image: -o-repeating-linear-gradient(-15deg, #d9d9d9, #d9d9d9 2px, #ebebeb 2px, #ebebeb 4px); background-image: repeating-linear-gradient(-15deg, #d9d9d9, #d9d9d9 2px, #ebebeb 2px, #ebebeb 4px); } .wx-audio-content .wx-audio-right .wx-audio-progrees .wx-audio-origin { width: 10px; height: 10px; margin-top: -5px; margin-left: 0; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; background-color: #FF9424; position: absolute; left: 0; top: 50%; z-index: 2; } .wx-audio-content .wx-audio-right .wx-audio-progrees .wx-audio-origin:before { content: " "; display: block; position: absolute; width: 24px; height: 24px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; /* background-image: radial-gradient(rgba(9, 187, 7, 0.3) 20%, transparent 40%); */ background-image: linear-gradient(-76deg, #ff9046 0%, #ffac54 75%, #ffc762 100%), linear-gradient(#ff7437, #ff7437 transparent 40%); margin-top: -12px; margin-left: -9px; cursor: pointer; outline: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .wx-audio-content .wx-audio-right .wx-audio-time { width: 100%; padding-top: 6px; height: auto; display: flex; align-items: center; justify-content: space-between; overflow: hidden; } .wx-audio-content .wx-audio-right .wx-audio-time span { font-size: 12px; color: #8c8c8c; }
wx-audio.js:
var WxAudio = (function(i) { var t = {} function e(A) { if (t[A]) return t[A].exports var o = (t[A] = { i: A, l: !1, exports: {} }) return i[A].call(o.exports, o, o.exports, e), (o.l = !0), o.exports } return ( (e.m = i), (e.c = t), (e.d = function(i, t, A) { e.o(i, t) || Object.defineProperty(i, t, { enumerable: !0, get: A }) }), (e.r = function(i) { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(i, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(i, "__esModule", { value: !0 }) }), (e.t = function(i, t) { if ((1 & t && (i = e(i)), 8 & t)) return i if (4 & t && "object" == typeof i && i && i.__esModule) return i var A = Object.create(null) if ( (e.r(A), Object.defineProperty(A, "default", { enumerable: !0, value: i }), 2 & t && "string" != typeof i) ) for (var o in i) e.d( A, o, function(t) { return i[t] }.bind(null, o) ) return A }), (e.n = function(i) { var t = i && i.__esModule ? function() { return i.default } : function() { return i } return e.d(t, "a", t), t }), (e.o = function(i, t) { return Object.prototype.hasOwnProperty.call(i, t) }), (e.p = ""), e((e.s = 0)) ) })([ function(i, t, e) { "use strict" Object.defineProperty(t, "__esModule", { value: !0 }) var A = (function() { function i(i, t) { for (var e = 0; e < t.length; e++) { var A = t[e] ;(A.enumerable = A.enumerable || !1), (A.configurable = !0), "value" in A && (A.writable = !0), Object.defineProperty(i, A.key, A) } } return function(t, e, A) { return e && i(t.prototype, e), A && i(t, A), t } })() e(3) var o = e(1), n = e(2), r = (function() { function i(t) { !(function(i, t) { if (!(i instanceof t)) throw new TypeError("Cannot call a class as a function") })(this, i) ;(this.opt = Object.assign( {}, { ele: null, width: "320px", title: "这是一个测试title", src: "", disc: "这是一个测试disc", autoplay: !1, loop: !0, ended: function() {} }, t )), "string" == typeof this.opt.ele && (this.opt.ele = document.querySelector(this.opt.ele)), this.opt.ele && ((this.loading = !1), (this.isDrag = !1), (this.isplaying = !1), (this.durationT = 0), (this.currentT = 0), (this.currentP = 0), (this.maxProgressWidth = 0), (this.dragProgressTo = 0), (this.reduceTBefore = 0), (this.reduceTAfter = 0), this.initDom()) } return ( A(i, [ { key: "initDom", value: function() { var i = this ;(this.wxAudioC = document.createElement("div")), (this.wxAudioC.className = "wx-audio-content"), (this.wxAudioC.style.width = this.opt.width), this.opt.ele.appendChild(this.wxAudioC), (this.wxAudio = document.createElement("audio")), (this.wxAudio.className = "wx-audio-content"), (this.wxAudio.src = this.opt.src), this.opt.loop && this.wxAudio.setAttribute("loop", this.opt.loop), this.wxAudioC.appendChild(this.wxAudio), (this.wxAudioL = document.createElement("div")), (this.wxAudioL.className = "wx-audio-left"), this.wxAudioC.appendChild(this.wxAudioL), (this.wxAudioStateImg = document.createElement("img")), (this.wxAudioStateImg.className = "wx-audio-state"), (this.wxAudioStateImg.src = n), this.wxAudioL.appendChild(this.wxAudioStateImg), (this.wxAudioR = document.createElement("div")), (this.wxAudioR.className = "wx-audio-right"), this.wxAudioC.appendChild(this.wxAudioR), (this.wxAudioT = document.createElement("p")), (this.wxAudioT.className = "wx-audio-title"), (this.wxAudioT.innerText = this.opt.title), this.wxAudioR.appendChild(this.wxAudioT), (this.wxAudioD = document.createElement("p")), (this.wxAudioD.className = "wx-audio-disc"), (this.wxAudioD.innerText = this.opt.disc), this.wxAudioR.appendChild(this.wxAudioD), (this.wxAudioP = document.createElement("div")), (this.wxAudioP.className = "wx-audio-progrees"), this.wxAudioR.appendChild(this.wxAudioP), (this.wxAudioDetail = document.createElement("div")), (this.wxAudioDetail.className = "wx-progrees-detail"), this.wxAudioP.appendChild(this.wxAudioDetail), (this.wxVoiceP = document.createElement("span")), (this.wxVoiceP.className = "wx-voice-p"), this.wxAudioDetail.appendChild(this.wxVoiceP), (this.wxBufferP = document.createElement("span")), (this.wxBufferP.className = "wx-buffer-p"), this.wxAudioDetail.appendChild(this.wxBufferP), (this.wxLoading = document.createElement("span")), (this.wxLoading.className = "wx-loading"), this.wxAudioDetail.appendChild(this.wxLoading), (this.wxLoadingWrapper = document.createElement("span")), (this.wxLoadingWrapper.className = "wx-loading-wrapper"), this.wxLoading.appendChild(this.wxLoadingWrapper), (this.wxAudioOrigin = document.createElement("div")), (this.wxAudioOrigin.className = "wx-audio-origin"), this.wxAudioP.appendChild(this.wxAudioOrigin), (this.wxAudioTime = document.createElement("div")), (this.wxAudioTime.className = "wx-audio-time"), this.wxAudioR.appendChild(this.wxAudioTime), (this.wxAudioCurrent = document.createElement("span")), (this.wxAudioCurrent.className = "current-t"), (this.wxAudioCurrent.innerText = "00:00"), this.wxAudioTime.appendChild(this.wxAudioCurrent), (this.wxAudioDuration = document.createElement("span")), (this.wxAudioDuration.className = "duration-t"), (this.wxAudioDuration.innerText = "00:00"), this.wxAudioTime.appendChild(this.wxAudioDuration), this.initAudioEvent(), this.opt.autoplay && document.addEventListener( "WeixinJSBridgeReady", function() { i.audioPlay() } ) } }, { key: "audioPlay", value: function() { this.wxAudio.play(), (this.isPlaying = !0) } }, { key: "audioPause", value: function() { this.wxAudio.pause(), (this.isPlaying = !1) } }, { key: "audioPlayPause", value: function() { this.isPlaying ? this.audioPause() : this.audioPlay() } }, { key: "audioCut", value: function(i, t, e) { ;(this.wxAudio.src = i), (this.wxAudioT.innerText = t), (this.wxAudioD.innerText = e), (this.durationT = 0), (this.currentT = 0), (this.currentP = 0), (this.dragProgressTo = 0), (this.wxAudioCurrent.innerText = "00:00"), (this.wxAudioOrigin.style.left = "0px"), (this.wxVoiceP.style.width = "0px"), this.audioPlay() } }, { key: "showLoading", value: function(i) { ;(this.loading = i || !1), this.loading ? (this.wxLoading.style.display = "block") : (this.wxLoading.style.display = "none") } }, { key: "initAudioEvent", value: function() { var i = this ;(i.wxAudio.onplaying = function() { var t = new Date() ;(i.isPlaying = !0), (i.reduceTBefore = Date.parse(t) - Math.floor(1e3 * i.wxAudio.currentTime)), (i.wxAudioStateImg.src = o) }), (i.wxAudio.onpause = function() { ;(i.isPlaying = !1), i.showLoading(!1), (i.wxAudioStateImg.src = n) }), (i.wxAudio.onloadedmetadata = function() { ;(i.durationT = i.wxAudio.duration), (i.wxAudioDuration.innerText = i.formartTime( i.wxAudio.duration )) }), (i.wxAudio.onwaiting = function() { i.wxAudio.paused || i.showLoading(!0) }), (i.wxAudio.onprogress = function() { if (i.wxAudio.buffered.length > 0) { for (var t = 0, e = 0; e < i.wxAudio.buffered.length; e++) (t += i.wxAudio.buffered.end(e) - i.wxAudio.buffered.start(e)) > i.durationT && ((t = i.durationT), i.showLoading(!1), console.log("缓冲完成")) var A = Math.floor((t / i.durationT) * 100) i.wxBufferP.style.width = A + "%" } var o = new Date() i.wxAudio.paused || ((i.reduceTAfter = Date.parse(o) - Math.floor(1e3 * i.currentT)), i.reduceTAfter - i.reduceTBefore > 1e3 ? i.showLoading(!0) : i.showLoading(!1)) }), (i.wxAudio.onended = function() { i.opt.ended() }), (i.wxAudio.ontimeupdate = function() { var t = new Date() i.isDrag || ((i.currentT = i.wxAudio.currentTime), (i.currentP = Number( (i.wxAudio.currentTime / i.durationT) * 100 )), (i.reduceTBefore = Date.parse(t) - Math.floor(1e3 * i.currentT)), (i.currentP = i.currentP > 100 ? 100 : i.currentP), (i.wxVoiceP.style.width = i.currentP + "%"), (i.wxAudioOrigin.style.left = i.currentP + "%"), (i.wxAudioCurrent.innerText = i.formartTime( i.wxAudio.currentTime )), i.showLoading(!1)) }), (i.wxAudioStateImg.onclick = function() { i.audioPlayPause() }), (i.wxAudioOrigin.onmousedown = function(t) { i.isDrag = !0 var e = (t || window.event).clientX, A = t.target.offsetLeft ;(i.maxProgressWidth = i.wxAudioDetail.offsetWidth), (i.wxAudioC.onmousemove = function(t) { if (i.isDrag) { var o = (t || window.event).clientX ;(i.dragProgressTo = Math.min( i.maxProgressWidth, Math.max(0, A + (o - e)) )), i.updatePorgress() } }), (i.wxAudioC.onmouseup = function() { i.isDrag && ((i.isDrag = !1), (i.wxAudio.currentTime = Math.floor( (i.dragProgressTo / i.maxProgressWidth) * i.durationT ))) }), (i.wxAudioC.onmouseleave = function() { i.isDrag && ((i.isDrag = !1), (i.wxAudio.currentTime = Math.floor( (i.dragProgressTo / i.maxProgressWidth) * i.durationT ))) }) }), (i.wxAudioOrigin.ontouchstart = function(t) { i.isDrag = !0 var e = t || window.event, A = e.touches[0].clientX, o = e.target.offsetLeft ;(i.maxProgressWidth = i.wxAudioDetail.offsetWidth), (i.wxAudioC.ontouchmove = function(t) { if (i.isDrag) { var e = (t || window.event).touches[0].clientX ;(i.dragProgressTo = Math.min( i.maxProgressWidth, Math.max(0, o + (e - A)) )), i.updatePorgress() } }), (i.wxAudioC.ontouchend = function() { i.isDrag && ((i.isDrag = !1), (i.wxAudio.currentTime = Math.floor( (i.dragProgressTo / i.maxProgressWidth) * i.durationT ))) }) }), (i.wxAudioDetail.onclick = function(t) { var e = (t || window.event).layerX, A = i.wxAudioDetail.offsetWidth i.wxAudio.currentTime = Math.floor((e / A) * i.durationT) }) } }, { key: "isWeiXin", value: function() { var i = window.navigator.userAgent.toLowerCase() return "micromessenger" === String(i.match(/MicroMessenger/i)) } }, { key: "updatePorgress", value: function() { ;(this.wxAudioOrigin.style.left = this.dragProgressTo + "px"), (this.wxVoiceP.style.width = this.dragProgressTo + "px") var i = Math.floor( (this.dragProgressTo / this.maxProgressWidth) * this.durationT ) this.wxAudioCurrent.innerText = this.formartTime(i) } }, { key: "formartTime", value: function(i) { var t = function(i) { return (i = i.toString())[1] ? i : "0" + i }, e = Math.floor(i / 60), A = Math.floor(i % 60) return t(e) + ":" + t(A) } } ]), i ) })() t.default = r }, function(i, t) { i.exports = "data:image/gif;base64,R0lGODlhVABUAPfJAButGiKwIe747m7Kbe/47/r8+vj7+J3bnB+vHqDcny20LByuG+j16Pz9/HvPeiOwIk/ATuT05FLBUTa3Np7bnTm4OCqzKdXv1ff79ySwI8Lowi+1Lj66Pb3mvdvx23nPeaTepMjqyLXktVzEW63hrTW2NEu+So7WjdLu0j66PrzmvKrgqn7QfeL04p/cnkm+SCiyJ7/nvmTHYyGwIPn8+fX69d7y3vb69iWxJE2/TPL58iuzKqzgrHjOeEW8RPT69PH58ZXYlNDtz4bThSyzK+337eb15mLGYdbv1mnJaW/Lb8bqxja3NeX15V3FXPD48GHGYfP689fw11HAUHzQe3fOd0q+STi4N8rrytPu01/FXz25PGzKa17FXez37CCvH6ngqaDcoOn26ODz3x6vHZLXkiaxJef150y/S+Hz4NDt0E/AT77nvrTjtJfZlnrPeje3N0K7QWvKaoXThLvmu8fqxmXHZIPSg5bZlavgq8/tz9zx3JzbnI/WjtHu0Ue9RkS8Q93y3ZTYk6LdovH58FfDV2DGYInUiX3QfIfThmfIZtnw2Dq4OZDXkLrlulDAUIzVi43VjG/LbsPpw/n7+XTNc1TBUx6uHcDnv3DLcDG1MN/y31/FXsjqx2jJaFPBUi60LS60LljDWHXNdGbIZTS2M6/hrnfOdke9R9Tv1FbCVWPHYkC6P1rEWbDir0a8RVXCVMnryYvVi4jUiMHowVnDWMvry+v36zO2Mqjfpx2uHGfIZyeyJsDowLHisZHXkZPYk7nluXbNddnw2fv8+4fUhzC1LxqtGf39/QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4NzEyYzBkMi03NGJlLTQ5MTEtYmQyMi1lNmI4ZTlhZmQ5ZGIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkUzMTAyRkEyMjg0MTFFN0JDNzBCMEY5NjNCMDhDQjQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkUzMTAyRjkyMjg0MTFFN0JDNzBCMEY5NjNCMDhDQjQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4NzEyYzBkMi03NGJlLTQ5MTEtYmQyMi1lNmI4ZTlhZmQ5ZGIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODcxMmMwZDItNzRiZS00OTExLWJkMjItZTZiOGU5YWZkOWRiIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJ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" }, function(i, t) { i.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAMAAAArteDzAAAAaVBMVEUAAAAarRkarRkarRkarRkarRkarRkarRkarRkarRkarRkarRkarRkarRkarRkarRkarRkarRkarRkarRkarRkarRkarRkarRkarRkarRkarRkarRkarRkarRkarRkarRkarRkarRkarRlIa6J1AAAAInRSTlMA9wYa38QR7ZJnMK1IIqBsO3fXDbSGQudZz5fKpV0rfbpRlHIjYQAAA35JREFUWMPFWduyqjAMDS0tgtwEFBGv/P9Hntmh3cWDTYsMs/Oio3SRy0qapuCU7PXIRdUGQxCFncgfrwzWCb/l4TCTML/xbxFlIQariEJ+AZnkwUBKkCdLIZvBQ5olsPw61Uhc4vTOa4Ca39P4IqYWXH2dyw5mWXUs2ez/8liZVx6YD2bW6wXRzmpesov0U70HxW5azTBmpD1xqJW9uUzfaS0Lp1ms0Nru6Nfv9WPSi8lahT2BKoWyvARPKZUPhLRiduq9ckHaKds6y5pa6XmARXJQutaEP4MzLJTzyJfmk193I2YKiyUdUXcf+OnCdKPO+JqNvxO2kx4YNcr+c2jvjpE7Wv27W4uRS/C1jFEu3mpdhJyX34PWISY3ByNj/SxhhZRjfZ0UMkUJt3Bxx08rJU2xbFB16YEZDiG3JSy6sHlXNPbCHIbOVpHiN1VzjBLzKOCkmxjGKld6B4oNbjkiqi3rkJeBNN8jBj7SUEaxyGgnjE1OkS0mHkUAgd5X/qWF80mWR7PaOY0410GrnHHXVHpSqlZII521RzeXqtpkTkgEEitIiwF1YeLDJgQnIldbgAx5wMBj5z4br+aWB5GdGbxUxGjUp6ESLmxhJsaMFzx+Pi5+VIpN6bTUlcvPfw/InXlvjO5MjsdE/ucg6DjxRlEJY4Wb0J1IlnR0ZoXGEHF/6l1I68d+vj3ho9xH0mO+cjumNiMxvg/tTOWYcIAkqCl+XjRbtH7CHv4aCQrIQIui3TCxNPyN1BMXfhQFFxCgJ/yzmYAaTpGgEZpPoOq60GJctfkRaX5IBApRVTNTm/TvnYHqCEoh6kMzUCuNxnUUpVzkB/2+/Pc5iTpT5PdNUx78FrMT6kymqbugmEpxNZU4JXaph7v0GbOGxJQ3SZU+ryINSWT8iAt6skg7txPD1wCJN/rrQG0nZuNzo54nHQOnNj6zRTtRj5Pe5klu0d7NBGTThvFENhNE20NQS5BtD9GgUdQqyQZtaSuZ4bIr1fUGcmHTCz1SRpJNL9GeE3xNHe35/CDhRj04DhLzI48b9eI48mxxONvyGLn+wGtsLTY5mm87RFg/7jhNxh3bD2aANWtHSFsOu7Yfy60fIG4/6lw/lN14fOwedJdWXxKD7m1H8u7LAwZMZsn88mCDa46/v5DZ6OoIhcf7dg7Y7mPalb7XcVEwDEFU+V3H/QOplcP+ctPpgwAAAABJRU5ErkJggg==" }, function(i, t) {} ]).default
控制播放暂停：
给播放暂停按钮绑定点击事件：
isRotate:true
_togglePlay() { var wxauido = document.getElementsByClassName("wx-audio-content")[1]; this.isRotate = !this.isRotate; this.isRotate ? wxauido.play() : wxauido.pause(); },
wx-audio-content为插件生成的节点
浙公网安备 33010602011771号