350 lines
12 KiB
JavaScript
350 lines
12 KiB
JavaScript
var WRAUDIO_TEMPLATE = '<div id="wraudioid_xxx" class="audio_container">\
|
|
<div id="wraudio_button" class="audio_button"></div>\
|
|
<div class="audio_content">\
|
|
<p id="wraudio_title" class="audio_title"></p>\
|
|
<div class="audio_progress">\
|
|
<div class="audio_progress_bottom"></div>\
|
|
<div id="wraudio_progress_bar" class="audio_progress_top" style="width: 0;"></div>\
|
|
<div id="wraudio_progress_button" class="audio_progress_current" style="left: 0;"></div>\
|
|
</div>\
|
|
<div class="audio_time">\
|
|
<span id="wraudio_time_elapsed" class="audio_time_left"></span>\
|
|
<span id="wraudio_time_remains" class="audio_time_right"></span>\
|
|
</div>\
|
|
</div>\
|
|
</div>';
|
|
|
|
var _Utils = function () {
|
|
this.findChildById = function (element, childID) {
|
|
var retElement = null;
|
|
var lstChildren = Utils.getAllDescendant(element);
|
|
|
|
for (var i = 0; i < lstChildren.length; i++) {
|
|
if (lstChildren[i].id == childID) {
|
|
retElement = lstChildren[i];
|
|
break;
|
|
}
|
|
}
|
|
|
|
return retElement;
|
|
}
|
|
|
|
this.getAllDescendant = function (element, lstChildrenNodes) {
|
|
lstChildrenNodes = lstChildrenNodes ? lstChildrenNodes : [];
|
|
|
|
var lstChildren = element.childNodes;
|
|
|
|
for (var i = 0; i < lstChildren.length; i++) {
|
|
if (lstChildren[i].nodeType == 1) // 1 is 'ELEMENT_NODE'
|
|
{
|
|
lstChildrenNodes.push(lstChildren[i]);
|
|
lstChildrenNodes = Utils.getAllDescendant(lstChildren[i], lstChildrenNodes);
|
|
}
|
|
}
|
|
|
|
return lstChildrenNodes;
|
|
}
|
|
|
|
this._formatTime = function (time, quotationStyle) {
|
|
if (time < 0) {
|
|
return '- : -'
|
|
}
|
|
var hour = parseInt(time / 3600);
|
|
var min = parseInt((time - hour * 3600) / 60);
|
|
var sec = parseInt((time - hour * 3600 - min * 60));
|
|
var timeText = '';
|
|
if (hour > 0) {
|
|
timeText += hour + ':';
|
|
}
|
|
if (quotationStyle) {
|
|
if (min > 0) {
|
|
timeText += min + "'";
|
|
}
|
|
} else {
|
|
if (min < 10) {
|
|
timeText += '0' + min + ':';
|
|
} else {
|
|
timeText += min + ':';
|
|
}
|
|
}
|
|
if (quotationStyle) {
|
|
timeText += sec + "''";
|
|
} else {
|
|
if (sec < 10) {
|
|
timeText += '0' + sec;
|
|
} else {
|
|
timeText += sec;
|
|
}
|
|
}
|
|
return timeText;
|
|
}
|
|
|
|
this.formatTime = function (time, remains) {
|
|
var intTime = parseInt(time);
|
|
var desc = this._formatTime(intTime);
|
|
if (remains && intTime > 0) {
|
|
return '-' + desc;
|
|
}
|
|
return desc;
|
|
}
|
|
}
|
|
|
|
var Utils = new _Utils;
|
|
var player = {audio: null, current: null};
|
|
var videoIframes = [];
|
|
|
|
function getContentRoot() {
|
|
return document.getElementById('editor');
|
|
}
|
|
|
|
function createWRAudio(title, src, duration) {
|
|
var tmp = document.createElement('div');
|
|
tmp.innerHTML = WRAUDIO_TEMPLATE;
|
|
var wrAudio = tmp.firstChild;
|
|
|
|
wrAudio.id = 'wraudioid_' + Date.now() + '_' + Math.floor((Math.random() * 1000) + 1);
|
|
wrAudio.src = src;
|
|
wrAudio.duration = duration;
|
|
|
|
var titleEl = Utils.findChildById(wrAudio, 'wraudio_title', true);
|
|
titleEl.innerHTML = title || '';
|
|
var button = Utils.findChildById(wrAudio, 'wraudio_button', true);
|
|
button.addEventListener('click', function() {
|
|
clickPlayButton(wrAudio);
|
|
}, false);
|
|
|
|
var elapsedEl = Utils.findChildById(wrAudio, 'wraudio_time_elapsed', true);
|
|
var remainsEl = Utils.findChildById(wrAudio, 'wraudio_time_remains', true);
|
|
elapsedEl.innerHTML = Utils.formatTime(0);
|
|
remainsEl.innerHTML = Utils.formatTime(duration, true);
|
|
return wrAudio;
|
|
}
|
|
|
|
function resetWRAudio(wrAudio) {
|
|
if (!wrAudio) {
|
|
return;
|
|
}
|
|
var button = Utils.findChildById(wrAudio, 'wraudio_button', true);
|
|
button.classList.remove('active');
|
|
var elapsedEl = Utils.findChildById(wrAudio, 'wraudio_time_elapsed', true);
|
|
var remainsEl = Utils.findChildById(wrAudio, 'wraudio_time_remains', true);
|
|
elapsedEl.innerHTML = Utils.formatTime(0);
|
|
remainsEl.innerHTML = Utils.formatTime(wrAudio.duration, true);
|
|
|
|
var progressBar = Utils.findChildById(wrAudio, 'wraudio_progress_bar', true);
|
|
var progressButton = Utils.findChildById(wrAudio, 'wraudio_progress_button', true);
|
|
progressBar.style.width = '0';
|
|
progressButton.style.left = '0';
|
|
}
|
|
|
|
function clickPlayButton(wrAudio) {
|
|
if (!wrAudio) {
|
|
return;
|
|
}
|
|
var src = wrAudio.src;
|
|
if (!player.current) {
|
|
player.current = wrAudio;
|
|
player.audio.src = src;
|
|
player.audio.play();
|
|
} else if (player.current.id != wrAudio.id) {
|
|
var last = player.current;
|
|
player.current = wrAudio;
|
|
resetWRAudio(last);
|
|
|
|
player.audio.src = src;
|
|
player.audio.play();
|
|
} else {
|
|
if (!player.audio.paused) {
|
|
player.audio.pause();
|
|
} else {
|
|
player.audio.play();
|
|
}
|
|
}
|
|
}
|
|
|
|
function pauseCurrentAudio() {
|
|
if (player.audio) {
|
|
player.audio.pause();
|
|
}
|
|
}
|
|
|
|
function pauseCurrentVideo() {
|
|
let newVideoIframes = [];
|
|
for (var i = 0; i < videoIframes.length; i++) {
|
|
var oldFrame = videoIframes[i];
|
|
oldFrame.src = oldFrame.src;
|
|
}
|
|
}
|
|
|
|
function pauseMedia() {
|
|
pauseCurrentAudio();
|
|
pauseCurrentVideo();
|
|
}
|
|
|
|
function onPlay() {
|
|
var button = Utils.findChildById(player.current, 'wraudio_button', true);
|
|
button.classList.add('active');
|
|
}
|
|
|
|
function onPause() {
|
|
var button = Utils.findChildById(player.current, 'wraudio_button', true);
|
|
button.classList.remove('active');
|
|
}
|
|
|
|
function onEnded() {
|
|
var button = Utils.findChildById(player.current, 'wraudio_button', true);
|
|
button.classList.remove('active');
|
|
}
|
|
|
|
function onDurationchange() {
|
|
player.current.duration = player.audio.duration;
|
|
}
|
|
|
|
function onVideoPlaying() {
|
|
pauseCurrentAudio();
|
|
}
|
|
|
|
function onTimeupdate() {
|
|
var wrAudio = player.current;
|
|
var elapsedEl = Utils.findChildById(wrAudio, 'wraudio_time_elapsed', true);
|
|
var remainsEl = Utils.findChildById(wrAudio, 'wraudio_time_remains', true);
|
|
elapsedEl.innerHTML = Utils.formatTime(player.audio.currentTime);
|
|
remainsEl.innerHTML = Utils.formatTime(player.audio.duration - player.audio.currentTime, true);
|
|
|
|
var progressBar = Utils.findChildById(wrAudio, 'wraudio_progress_bar', true);
|
|
var progressButton = Utils.findChildById(wrAudio, 'wraudio_progress_button', true);
|
|
var progress = 0;
|
|
if (player.audio.duration > 0) {
|
|
progress = parseInt(player.audio.currentTime / player.audio.duration * 100);
|
|
}
|
|
progressBar.style.width = progress + '%';
|
|
progressButton.style.left = progress + '%';
|
|
}
|
|
|
|
function adjustMPContent() {
|
|
var imgs = document.querySelectorAll('img[data-src]');
|
|
for (var i = 0; i < imgs.length ; i++) {
|
|
var img = imgs[i];
|
|
img.src = img.getAttribute('data-src');
|
|
img.style = 'width: auto !important; height: auto !important; visibility: visible !important;max-width:100% !important';
|
|
}
|
|
|
|
var links = document.querySelectorAll('a[href^="https://open.weixin.qq.com/connect/oauth2/authorize"],a[href^="http://open.weixin.qq.com/connect/oauth2/authorize"]');
|
|
for (var i = 0; i < links.length ; i++) {
|
|
var link = links[i]
|
|
|
|
params = link.href.split('&');
|
|
for (var j = 0;j<params.length;j++) {
|
|
param = params[j];
|
|
if (param.startsWith('redirect_uri=')) {
|
|
link.href = decodeURIComponent(param.split('redirect_uri=')[1]);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
var iframes = document.querySelectorAll('iframe[data-src]');
|
|
for (var i = 0; i < iframes.length ; i++) {
|
|
(function (index) {
|
|
var iframe = iframes[index];
|
|
var iframeWidth = document.body.offsetWidth;
|
|
var iframeHeight = iframeWidth * 0.75;
|
|
var src = iframe.getAttribute('data-src');
|
|
src = src.replace(/preview.html/, 'player.html');
|
|
src = src.replace(/&(width=.*height=.*)&/, '&width=' + iframeWidth + '&height=' + iframeHeight + '&');
|
|
iframe.src = src;
|
|
// 是否视频
|
|
/*
|
|
if ((' ' + iframe.className + ' ').indexOf(' video_iframe ') > -1) {
|
|
iframe.onload = function () {
|
|
var styleNode = document.createElement('style');
|
|
styleNode.type = 'text/css';
|
|
styleNode.appendChild(document.createTextNode(''));
|
|
iframe.contentDocument.body.appendChild(styleNode);
|
|
}
|
|
}
|
|
*/
|
|
// if (iframe.classList.contains("video_iframe")) {
|
|
// iframe.onload = function() {
|
|
// if (iframe.contentWindow && iframe.contentWindow.document) {
|
|
// var videoEl = iframe.contentWindow.document.getElementById("tenvideo_video_player_0");
|
|
// if (videoEl) {
|
|
// videoEl.onplaying = function() {
|
|
// onVideoPlaying();
|
|
// };
|
|
// }
|
|
// }
|
|
// };
|
|
// }
|
|
videoIframes.push(iframe);
|
|
})(i);
|
|
}
|
|
|
|
var votes = document.querySelectorAll(".vote_area");
|
|
for (var i = 0; i < votes.length; i++) {
|
|
var vote = votes[i];
|
|
vote.parentElement.removeChild(vote);
|
|
}
|
|
|
|
var miniPrograms = document.querySelectorAll("mp-miniprogram");
|
|
for (var i = 0; i < miniPrograms.length; i++) {
|
|
var miniProgram = miniPrograms[i];
|
|
var parentElement = miniProgram.parentElement;
|
|
if (parentElement && parentElement.tagName && parentElement.tagName.toLowerCase() === 'p') {
|
|
if (parentElement.parentElement) {
|
|
parentElement.parentElement.removeChild(parentElement);
|
|
}
|
|
}
|
|
}
|
|
|
|
var miniAppLinks = document.querySelectorAll(".weapp_text_link, .weapp_image_link");
|
|
for (var i = 0; i < miniAppLinks.length; i++) {
|
|
var miniAppLink = miniAppLinks[i];
|
|
miniAppLink.parentElement.removeChild(miniAppLink);
|
|
}
|
|
|
|
var needPlayer = false;
|
|
var mpvoices = document.querySelectorAll('mpvoice[voice_encode_fileid]');
|
|
for (var i = 0; i < mpvoices.length ; i++) {
|
|
var mpvoice = mpvoices[i];
|
|
var title = mpvoice.getAttribute('name');
|
|
var src = 'https://res.wx.qq.com/voice/getvoice?mediaid=' + mpvoice.getAttribute('voice_encode_fileid');
|
|
var duration = mpvoice.hasAttribute('play_length') ? mpvoice.getAttribute('play_length') / 1000 : -1;
|
|
var wrAudio = createWRAudio(title, src, duration);
|
|
mpvoice.parentElement.appendChild(wrAudio);
|
|
needPlayer = true;
|
|
}
|
|
|
|
var qqmusics = document.querySelectorAll('qqmusic[audiourl]');
|
|
for (var i = 0; i < qqmusics.length ; i++) {
|
|
var qqmusic = qqmusics[i];
|
|
var title = qqmusic.getAttribute('music_name');
|
|
var src = qqmusic.getAttribute('audiourl');
|
|
var duration = qqmusic.hasAttribute('play_length') ? qqmusic.getAttribute('play_length') / 1000 : -1;
|
|
var wrAudio = createWRAudio(title, src, duration);
|
|
qqmusic.parentElement.appendChild(wrAudio);
|
|
needPlayer = true;
|
|
}
|
|
|
|
if (needPlayer) {
|
|
var audio = document.createElement('audio');
|
|
audio.autoplay = false;
|
|
audio.controls = true;
|
|
audio.style.display = "none";
|
|
|
|
audio.addEventListener("play", onPlay, false);
|
|
audio.addEventListener("pause", onPause, false);
|
|
audio.addEventListener("ended", onEnded, false);
|
|
audio.addEventListener("durationchange", onDurationchange, false);
|
|
audio.addEventListener("timeupdate", onTimeupdate, false);
|
|
|
|
getContentRoot().appendChild(audio);
|
|
player.audio = audio;
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
adjustMPContent();
|
|
}, false);
|
|
|