92

parent 0fa2ed74
......@@ -11,4 +11,4 @@
position: fixed;
background: #f4f4f4;
}
/* html{font-size: 1px;} */</style><link href=static/css/app.f983055a19b69eb54137ee36031e8a72.css rel=stylesheet></head><body><div id=app></div><script src=https://res.wx.qq.com/open/js/jweixin-1.3.2.js></script><script></script><script type=text/javascript src=static/js/manifest.8eff8c01c57eb758501d.js></script><script type=text/javascript src=static/js/vendor.eb2fd737d78619d0ba95.js></script><script type=text/javascript src=static/js/app.84c20d6727d53f64092c.js></script></body></html>
\ No newline at end of file
/* html{font-size: 1px;} */</style><link href=static/css/app.f983055a19b69eb54137ee36031e8a72.css rel=stylesheet></head><body><div id=app></div><script src=https://res.wx.qq.com/open/js/jweixin-1.3.2.js></script><script></script><script type=text/javascript src=static/js/manifest.56033727bc9107de0e7b.js></script><script type=text/javascript src=static/js/vendor.eb2fd737d78619d0ba95.js></script><script type=text/javascript src=static/js/app.84c20d6727d53f64092c.js></script></body></html>
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
!function(e){var f=window.webpackJsonp;window.webpackJsonp=function(c,b,n){for(var r,t,o,i=0,u=[];i<c.length;i++)t=c[i],a[t]&&u.push(a[t][0]),a[t]=0;for(r in b)Object.prototype.hasOwnProperty.call(b,r)&&(e[r]=b[r]);for(f&&f(c,b,n);u.length;)u.shift()();if(n)for(i=0;i<n.length;i++)o=d(d.s=n[i]);return o};var c={},a={64:0};function d(f){if(c[f])return c[f].exports;var a=c[f]={i:f,l:!1,exports:{}};return e[f].call(a.exports,a,a.exports,d),a.l=!0,a.exports}d.e=function(e){var f=a[e];if(0===f)return new Promise(function(e){e()});if(f)return f[2];var c=new Promise(function(c,d){f=a[e]=[c,d]});f[2]=c;var b=document.getElementsByTagName("head")[0],n=document.createElement("script");n.type="text/javascript",n.charset="utf-8",n.async=!0,n.timeout=12e4,d.nc&&n.setAttribute("nonce",d.nc),n.src=d.p+"static/js/"+({0:"vendor-async"}[e]||e)+"."+{0:"78d248f24ee84ccfea64",1:"c707946412c0e9a1f479",2:"aa6329edd741532bf257",3:"6c3676e8302b74647cbc",4:"12e9fe37eeaae4f8b8cb",5:"dc1e143a809fb7bf0e37",6:"c7cc7df111d85cf27b9b",7:"05a32025a8fddbc1baac",8:"f06355b665053b1c66f2",9:"ea46092a1ef75ed2d4be",10:"7dd1192ad4b0c54bef3a",11:"8b4344f93be3dded5361",12:"3b4cd03528e061c10fe8",13:"b6d54705a7b03cc1a838",14:"5fab46d1539e8d8e9959",15:"f83fd7b1ec3a97f7bd66",16:"e3ef0f940227e40197fc",17:"e6e189589a552b9582ca",18:"a336f5a7427aea7acb7c",19:"8aea9d608af5e12b6142",20:"f335d8776f564e570545",21:"fd833b8ab6cb1e0d074f",22:"701a6ee38479b163f602",23:"c9ca476f161685cfc1db",24:"d28f421254641ee6240c",25:"2aec44292ca8a7f4d773",26:"90f95355f4999c507466",27:"14417f0a63a4de5fdc1b",28:"6f7b7f5155c4787a2851",29:"e166012c7d68e0230f85",30:"9c6bb1825ab060559e3f",31:"1e3c8e63235db66879e5",32:"d494177aad804ca9e139",33:"40a36e635ab23245496b",34:"481cee4e3407f0772555",35:"049b75b06f616c4d7687",36:"33fd9443eca7186bd78a",37:"387a0f6c39e912c0e844",38:"ff10a183065778d51989",39:"4d13253138f0ad098b23",40:"df490584d5524e769a1f",41:"2d0949e14872f28dcdd9",42:"a3c5303233bcbf5f410b",43:"d7f27db587bef55f83d5",44:"608c71c8f4606b62f58c",45:"a625e09d364bb0d7bb48",46:"07776e73dd61e71cd1f8",47:"e452231169befbf8cac2",48:"694f9bf593948955ab45",49:"f7d490d29da167056272",50:"e94f0be889244f07f898",51:"732aed7b4e578e2d6db7",52:"d6c0c0d0881755cc8506",53:"b9df3f2ebc42036f2cb0",54:"0df892b5de7b0d2a58af",55:"3c9b49aa5f568bd28272",56:"850a2a72f5cac7b39e5b",57:"2c739f835f434ed8e5fd",58:"1988cd306d0e500569a0",59:"3c45272d31ebf496d04e",60:"97ba1fb09d6b41ec9fd2",61:"626a3506faee124c08d4"}[e]+".js";var r=setTimeout(t,12e4);function t(){n.onerror=n.onload=null,clearTimeout(r);var f=a[e];0!==f&&(f&&f[1](new Error("Loading chunk "+e+" failed.")),a[e]=void 0)}return n.onerror=n.onload=t,b.appendChild(n),c},d.m=e,d.c=c,d.d=function(e,f,c){d.o(e,f)||Object.defineProperty(e,f,{configurable:!1,enumerable:!0,get:c})},d.n=function(e){var f=e&&e.__esModule?function(){return e.default}:function(){return e};return d.d(f,"a",f),f},d.o=function(e,f){return Object.prototype.hasOwnProperty.call(e,f)},d.p="",d.oe=function(e){throw console.error(e),e}}([]);
\ No newline at end of file
!function(e){var a=window.webpackJsonp;window.webpackJsonp=function(c,b,n){for(var r,t,o,i=0,u=[];i<c.length;i++)t=c[i],f[t]&&u.push(f[t][0]),f[t]=0;for(r in b)Object.prototype.hasOwnProperty.call(b,r)&&(e[r]=b[r]);for(a&&a(c,b,n);u.length;)u.shift()();if(n)for(i=0;i<n.length;i++)o=d(d.s=n[i]);return o};var c={},f={64:0};function d(a){if(c[a])return c[a].exports;var f=c[a]={i:a,l:!1,exports:{}};return e[a].call(f.exports,f,f.exports,d),f.l=!0,f.exports}d.e=function(e){var a=f[e];if(0===a)return new Promise(function(e){e()});if(a)return a[2];var c=new Promise(function(c,d){a=f[e]=[c,d]});a[2]=c;var b=document.getElementsByTagName("head")[0],n=document.createElement("script");n.type="text/javascript",n.charset="utf-8",n.async=!0,n.timeout=12e4,d.nc&&n.setAttribute("nonce",d.nc),n.src=d.p+"static/js/"+({0:"vendor-async"}[e]||e)+"."+{0:"78d248f24ee84ccfea64",1:"34176ac8a792689cd932",2:"aa6329edd741532bf257",3:"6c3676e8302b74647cbc",4:"12e9fe37eeaae4f8b8cb",5:"5306a5ba25986ba0e61b",6:"c7cc7df111d85cf27b9b",7:"05a32025a8fddbc1baac",8:"f06355b665053b1c66f2",9:"ea46092a1ef75ed2d4be",10:"7dd1192ad4b0c54bef3a",11:"8b4344f93be3dded5361",12:"3b4cd03528e061c10fe8",13:"b6d54705a7b03cc1a838",14:"5fab46d1539e8d8e9959",15:"f83fd7b1ec3a97f7bd66",16:"e3ef0f940227e40197fc",17:"e6e189589a552b9582ca",18:"a336f5a7427aea7acb7c",19:"8aea9d608af5e12b6142",20:"f335d8776f564e570545",21:"fd833b8ab6cb1e0d074f",22:"701a6ee38479b163f602",23:"c9ca476f161685cfc1db",24:"d28f421254641ee6240c",25:"2aec44292ca8a7f4d773",26:"90f95355f4999c507466",27:"14417f0a63a4de5fdc1b",28:"6f7b7f5155c4787a2851",29:"e166012c7d68e0230f85",30:"9c6bb1825ab060559e3f",31:"1e3c8e63235db66879e5",32:"d494177aad804ca9e139",33:"40a36e635ab23245496b",34:"481cee4e3407f0772555",35:"049b75b06f616c4d7687",36:"33fd9443eca7186bd78a",37:"387a0f6c39e912c0e844",38:"ff10a183065778d51989",39:"4d13253138f0ad098b23",40:"df490584d5524e769a1f",41:"2d0949e14872f28dcdd9",42:"a3c5303233bcbf5f410b",43:"d7f27db587bef55f83d5",44:"608c71c8f4606b62f58c",45:"a625e09d364bb0d7bb48",46:"07776e73dd61e71cd1f8",47:"e452231169befbf8cac2",48:"694f9bf593948955ab45",49:"f7d490d29da167056272",50:"e94f0be889244f07f898",51:"732aed7b4e578e2d6db7",52:"d6c0c0d0881755cc8506",53:"b9df3f2ebc42036f2cb0",54:"0df892b5de7b0d2a58af",55:"3c9b49aa5f568bd28272",56:"850a2a72f5cac7b39e5b",57:"2c739f835f434ed8e5fd",58:"1988cd306d0e500569a0",59:"3c45272d31ebf496d04e",60:"97ba1fb09d6b41ec9fd2",61:"626a3506faee124c08d4"}[e]+".js";var r=setTimeout(t,12e4);function t(){n.onerror=n.onload=null,clearTimeout(r);var a=f[e];0!==a&&(a&&a[1](new Error("Loading chunk "+e+" failed.")),f[e]=void 0)}return n.onerror=n.onload=t,b.appendChild(n),c},d.m=e,d.c=c,d.d=function(e,a,c){d.o(e,a)||Object.defineProperty(e,a,{configurable:!1,enumerable:!0,get:c})},d.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return d.d(a,"a",a),a},d.o=function(e,a){return Object.prototype.hasOwnProperty.call(e,a)},d.p="",d.oe=function(e){throw console.error(e),e}}([]);
\ No newline at end of file
......@@ -398,9 +398,14 @@ export default {
elementID: this.$route.query.elementId.toString()
});
}
this.$nextTick(()=>{
setTimeout(()=>{
this.$refs.audio.play();
})
},100)
// this.$refs.audio.play();
// this.$nextTick(()=>{
// // console.log(this.$refs.audio)
// this.$refs.audio.play();
// })
},
// 播放暂停
onStop(flag) {
......
<template>
<div class="audioOff">
<div class="ofplayBox">
<audio id="audio" :src="src" @canplay ="onplay" @play="playOn"></audio>
<div class="isPlayImg">
<!--开始播放-->
<img v-if="!playflg" @click="play()" :src="playUrl" />
<!--暂停-结束播放-->
<img v-if="playflg" @click="stop()" :src="stopUrl" />
</div>
<!--slider进度条-->
<div class="progress" @mousedown="stopTime()">
<input type="range" min="0" :max="offset" v-model="rangeValue" />
</div>
<div class="duration"><span>{{starttime}}</span>/<span class="right-timer">{{duration}}</span></div>
<div class="cover"></div>
</div>
</div>
</template>
<script>
import {getwechatParam} from "../../service/api";
import stopUrl from '../../assets/mould/look1/rs.png'
import playUrl from '../../assets/mould/look1/rp.png'
//--创建页面监听,页面加载完毕--触发音频播放
export default {
name: 'audioMsg',
props:[
'src',
'autoPlay'
],
data() {
return {
stopUrl:stopUrl,
playUrl:playUrl,
//这首歌时间有点长 大家测试的时候可以换一个短点的MP3文件
playflg: false,
rangeValue: 0,
starttime: '00:00', //正在播放时长
duration: '00:00', //总时长
offset: 0,
timer:null,
first:true
}
},
mounted(){
console.log('触发')
this.play();
if(this.autoPlay){
let that = this;
document.addEventListener('DOMContentLoaded', function () {
if(that.first){
function audioAutoPlay() {
var musicEle0 = document.getElementById('audio');
musicEle0.play();
}
audioAutoPlay();
}
});
//--创建触摸监听,当浏览器打开页面时,触摸屏幕触发事件,进行音频播放
document.addEventListener('touchstart', function () {
if(that.first){
function audioAutoPlay() {
var musicEle0 = document.getElementById('audio');
musicEle0.play();
}
audioAutoPlay();
}
});
this.autoPlayAudio();
this.play();
getwechatParam({
api_list:'onMenuShareAppMessage',
url:window.location.href.split('#')[0]
}).then(res=>{
let that = this;
wx.config({
debug: false,
appId: res.appId,
timestamp: parseInt(res.timestamp),
nonceStr: res.nonceStr,
signature: res.signature,
jsApiList: res.jsApiList
});
this.autoPlayAudio();
this.play();
});
this.$nextTick(()=>{
this.first = false
})
}
},
methods: {
stopTime(){
clearInterval(this.timer);
},
autoPlayAudio(){
let that = this;
let voice = document.querySelector('#audio');
document.addEventListener("WeixinJSBridgeReady",function(){
that.play();
},false);
wx.ready(function () {
that.$nextTick(()=> {
wx.ready(function () {
that.$nextTick(()=>{
if (typeof WeixinJSBridge === "object" && typeof WeixinJSBridge.invoke === "function") {
voice.play();
} else {
//監聽客户端抛出事件"WeixinJSBridgeReady"
if (document.addEventListener) {
document.addEventListener("WeixinJSBridgeReady", function(){
voice.play();
}, false);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", function(){
voice.play();
});
document.attachEvent("onWeixinJSBridgeReady", function(){
voice.play();
});
}
}
wx.ready(()=>{
voice.play();
})
})
})
})
})
},
getDuration(){
let min = null;
if(parseInt(this.offset / 60)<10){
min = '0' + parseInt(this.offset / 60)
}else{
min = parseInt(this.offset / 60)
}
let sec = parseInt(this.offset % 60);
if (sec < 10) {
sec = "0" + sec;
}
this.duration = min + ':' + sec; /* 00:00 */
},
onplay(){
let audio = document.querySelector('#audio');
this.offset = Math.ceil(parseInt(audio.duration));
this.$nextTick(()=>{
this.getDuration();
})
},
playOn(){
let audio = document.querySelector('#audio');
this.playflg = true;
this.timer = setInterval(() => {
let min = null;
if(parseInt(audio.currentTime / 60)<10){
min = '0' + parseInt(audio.currentTime / 60)
}else{
min = parseInt(audio.currentTime / 60)
}
let sec = parseInt(audio.currentTime % 60);
if (sec < 10) {
sec = "0" + sec;
}
this.starttime = min + ':' + sec; /* 00:00 */
this.rangeValue = parseInt(audio.currentTime);
if(this.rangeValue === this.offset) {
this.rangeValue=0;/*播放结束后进度条归零*/
this.starttime='00:00'; /*播放结束后时间归零*/
this.stop();
clearInterval(this.timer)
}
}, 1000)
},
//开始播放
play() {
let audio = document.querySelector('#audio');
audio.play();
},
//暂停-结束
stop() {
let audio = document.querySelector('#audio');
audio.pause();
this.playflg = false
},
},
watch:{
'rangeValue'(value,value2){
let audio = document.querySelector('#audio');
if(Math.abs(value - value2) > 2){
this.timer = setInterval(() => {
let min = null;
if(parseInt(audio.currentTime / 60)<10){
min = '0' + parseInt(audio.currentTime / 60)
}else{
min = parseInt(audio.currentTime / 60)
}
let sec = parseInt(audio.currentTime % 60);
if (sec < 10) {
sec = "0" + sec;
}
this.starttime = min + ':' + sec; /* 00:00 */
this.rangeValue = parseInt(audio.currentTime);
if(this.rangeValue == this.offset) {
this.rangeValue=0;/*播放结束后进度条归零*/
this.starttime='00:00'; /*播放结束后时间归零*/
this.stop()
clearInterval(this.timer)
}
}, 1000);
audio.currentTime = value;
}
}
}
}
</script>
<style lang="less" scoped>
@import "../../util/public";
input[type=range] {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-appearance: none;
display: flex;
width: 90%;
padding: 0 5 * @toVw;
border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
height: 2 * @toVw;
background: #999999;
border-radius: 1 * @toVw ;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border-radius: 50%; /*外观设置为圆形*/
height: 15 * @toVw;
width: 15 * @toVw;
margin-top: -6 * @toVw; /*使滑块超出轨道部分的偏移量相等*/
background: #ffffff;
border: solid 1* @toVw rgba(205, 224, 230, 0.5); /*设置边框*/
box-shadow: 0 0 2 * @toVw #3b4547; /*添加底部阴影*/
}
.audioOff {
padding: 5 * @toVw;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #888;
background: white;
border-radius: 500px;
}
.ofplayBox {
width: 100%;
height: 30 * @toVw;
margin: 0;
display: flex;
}
.isPlayImg {
width: 40 * @toVw;
height: 100%;
}
.isPlayImg img {
width: 30 * @toVw;
}
.progress {
flex: 1;
position: relative;
font-size: 12px;
}
.duration {
display: flex;
font-size: 12px;
margin-left: 5 * @toVw;
justify-content: space-between;
span:first-child{
margin-left: 0;
}
}
.right-timer{
margin-right: 0.27rem;
}
@media screen and (orientation: landscape) {
.audioOff {
padding: 2 * @toVw;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid #888;
background: white;
border-radius: 500px;
}
input[type=range] {
-webkit-appearance: none;
display: flex;
width: 90%;
padding: 0 5 * @toVw;
border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
height: 2 * @toVw;
background: #999999;
border-radius: 1 * @toVw ;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border-radius: 50%; /*外观设置为圆形*/
height: 10 * @toVw;
width: 10 * @toVw;
margin-top: -4 * @toVw; /*使滑块超出轨道部分的偏移量相等*/
background: #ffffff;
border: solid 1* @toVw rgba(205, 224, 230, 0.5); /*设置边框*/
box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/
}
.ofplayBox {
width: 100%;
height: 20 * @toVw;
margin: 0;
display: flex;
}
.isPlayImg {
width: 24 * @toVw;
margin-right: 5 * @toVw;
height: 100%;
}
.isPlayImg img {
width: 20 * @toVw;
}
.progress {
flex: 1;
position: relative;
font-size: 12px;
}
.duration {
display: flex;
font-size: 12px;
margin-left: 5 * @toVw;
justify-content: space-between;
span:first-child{
margin-left: 0;
}
}
.right-timer{
margin-right: 0.27rem;
}
}
</style>
......@@ -49,7 +49,6 @@
</div>
</div>
</mt-popup>
<div v-if="share_show" class="share-show-block" @click="share_show=false">
<div class="share-show-content">
<img :src="dataURL" class="cvs-img" id="cvs-img"/>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment