console.info("assist"); // 用于记录那个录音图标正在播放 var audioId = null; // 获取焦点 function getRange() { var selection = window.getSelection ? window.getSelection() : document.selection; var range = selection.createRange ? selection.createRange() : selection .getRangeAt(0); return range; } function saveHtml(id) { var html = $('#displayArea').html(); $ .ajax({ type: "POST", url: "/service?wdService=savePiZhuNrHtml&wdtest=false", data: { 'id': id, 'html': html }, async: false, dataType: "json", error: function () { // alert('fail'); } }); } function saveEditor(divId) { var element = $("#" + divId).find('#displayArea')[0]; var html = $("#" + divId).find('#displayArea').html(); var id = element.getAttribute('nrid'); $.ajax({ type: "POST", url: "/service?wdService=savePiZhuNrHtml&wdtest=false", data: { 'id': id, 'html': html }, async: false, dataType: "json", error: function () { // alert('fail'); } }); } function addToDisplayArea(item) { $('#displayArea').focus(); var range = getRange(); range.insertNode(item); range.setStartAfter(item); // 为图片添加click事件 // imageClick(); // 为div添加ondragstart事件 addDivDragStart(); // 重新fouse cursorManager.setEndOfRange(range); } // 根据src创建一个图片 function createImage(src) { var img = new Image(); $(img).addClass('item'); img.src = src; return img; } // 1、为书写状态添加img function addWritingImage(draw) { var canvas = draw.canvas; var img = createImage(canvas.toDataURL()); draw.erase(); draw.isDraw = false; addToDisplayArea(img); } function addRecorderImage(index) { var img = createImage('/nr/image/py/mobileIcon-voiceMsg.png'); $(img).addClass('audio'); $(img).data('index', index); // 新增音频内容到服务器中 addToService(index, img, id); // 为div添加图标 addToDisplayArea(img); // 为录音图标添加事件 addAudioEvent('.audio'); } // 将数据上传到服务器,index用于命名,img用于为该元素添加属性 function addToService(index, img, id) { console.info("进入"); var fd = new FormData(); fd.append("audioData", recorders[index].getBlob()); fd.append('parentId', id); fd.append('index', index); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { console.info(xhr.responseText); var result = JSON.parse(xhr.responseText); if (result['result']) { $(img).attr('data-id', result['id']); } } } xhr .open( "POST", "/service?wdService=uploadWAV&wdtest=false", false); xhr.send(fd); console.info("离开"); } // 为音频图标添加点击事件 function addAudioEvent(selector) { $(selector).on('click', function (event) { var target = event.target; var playFlag = $(event.target).data('palyFlag'); //播放器 var audio = document.getElementById('player'); if (playFlag == null || '' == playFlag || 'stoping' == playFlag) { //播放内容的index var index = $(target).data('index'); if (index != audioId) { audio = null; } $(event.target).data('palyFlag', 'playing'); event.target.src = 'nr/image/py/mobileIcon-playVoice.gif'; //audio == null证明需要重新播放录音 if (audio == null) { audio = document.getElementById('player'); /* 设置audio的url */ playRecording(index); } else { //继续播放audio中的内容 audio.play(); } /* 为audio添加结束事件 */ $(audio).on('ended', function (e) { $(target).data('palyFlag', 'stoping'); target.src = 'nr/image/py/mobileIcon-voiceMsg.png'; audio = null; audioId = null; }); } else { event.target.src = 'nr/image/py/mobileIcon-voiceMsg.png'; audio.pause(); $(target).data('palyFlag', 'stoping'); audioId = $(target).data('index'); } }) } // 2、为canvas添加mousedown和mouseup事件 // 如果鼠标离开该canvas且该该画板有书写内容,调用createImage方法 function canvasAddEvent(draw) { $(draw.canvas).on('mousedown', function (event) { if (draw.timeoutObject) { clearTimeout(draw.timeoutObject); } }); $(draw.canvas).on('mouseup', function (event) { if (draw.isDraw) { var timeoutObject = setTimeout(_addWritingImage(draw), 1000); draw.timeoutObject = timeoutObject; } }); $(draw.canvas).bind('touchstart', function (event) { if (draw.timeoutObject) { clearTimeout(draw.timeoutObject); } }); $(draw.canvas).bind('touchend', function (event) { if (draw.isDraw) { var timeoutObject = setTimeout(_addWritingImage(draw), 1000); draw.timeoutObject = timeoutObject; } }); } // setTimeout使用的闭包 function _addWritingImage(draw) { return function () { addWritingImage(draw); } } function GetUrlRelativePath(url) { var url = url; var arrUrl = url.split("//"); var start = arrUrl[1].indexOf("/"); var relUrl = arrUrl[1].substring(start);//stop省略,截取从start开始到结尾的所有字符 // if (relUrl.indexOf("?") != -1) { // relUrl = relUrl.split("?")[0]; // } return relUrl; } function pizhuInit(id,resDesign) { // 1、加载displayArea $('#displayArea') .load("/service?wdService=getCommonNrDataFile&wdtest=false&id=" + id, null, function () { console.log("pizhuInit"); console.log(resDesign); //显示音频数据 if(resDesign.privateData&&resDesign.privateData.children){ for(var i=0;i"); } } var audios = document.querySelectorAll('.audio'); //初始化样式 $('#displayArea > .audio').addClass('vLine-dashed'); $('#displayArea > .audio').removeClass("mobileIcon-voiceMsg").addClass("icon-voiceMsg"); $('#displayArea > .audio').removeClass("mobileIcon-playVoice").addClass("icon-voiceMsg"); $('#displayArea > .audio').removeClass("icon-playVoice").addClass("icon-voiceMsg"); $('#displayArea > .audio').removeClass("icon-pauseVoice").addClass("icon-voiceMsg"); if (audios.length > 0) { $(".audio-box").show(); var nowTime = $(".nowTime"); var audioE = $("#audioE"); var drag = false; var startX = 0; var startmoveOffsetX = 0; var moveingOffsetX = 0; var endmoveOoffsetX = 0; var doneW = 0; var doneLeft = 0; var progressW = 0; var nowTimeLeft = 0; var nowTimeW = parseFloat($(".nowTime").width()); console.log("nowTimeW---" + nowTimeW); var duration = 0; var doneWP = 0; var imgItemIndex = 0; var initAudio = function () { var url = null; var id = $('#displayArea > .audio').eq(0).attr('data-id'); /* 获取url */ $.ajax({ type: "POST", url: "/service?wdService=getCommonNrDataFilePath&wdtest=false", data: { 'id': id }, async: false, success: function (data) { url = data; }, error: function () { console.info('fail'); } }); audioE.get(0).src = '/service?wdService=getData&wdtest=false&path=' + url; } initAudio(); //设置时间 var setTime = function (timelong, domElement) { var m = Math.floor(timelong / 60); if (m < 10) { m = "0" + m; } var s = Math.floor(timelong % 60); if (s < 10) { s = "0" + s; } var timeStr = m + ":" + s; $("." + domElement).html(timeStr); } //设置nowTime位置 var setnowTimeLeft = function (setClassName, left) { var audioBoxLeft = $(".audio-box").offset().left; left = parseFloat(left - audioBoxLeft); $("." + setClassName).css({ "left": left + "px" }) } // $('#displayArea').css("display","block"); // $('#displayArea').css("background","#fff"); // $('#displayArea > .item').css("height","50px"); // $('#displayArea > .item').css("width","50px"); // $('#displayArea > .item').css("margin","0px"); // $('#displayArea > .item').css("border","solid 0px #CCCCCC"); // 2、为音频图标添加事件 $('#displayArea > .audio').on('click', function (event) { imgItemIndex = $(this).index(); var target = event.target; /* 变换图片 */ // var playFlag = $(event.target).data('palyFlag'); // console.log("playFlag:"+playFlag); // 播放器 // var audio = document.getElementById('player'); // if (playFlag == null || '' == playFlag || 'stoping' == playFlag) { if ($(this).hasClass('icon-voiceMsg')||$(this).hasClass('icon-pauseVoice')) { var id = $(event.target).attr('data-id'); if (id != audioId) { audio = null; } // $(event.target).data('palyFlag', 'playing'); $('#displayArea > .audio').each(function () { if ($(this).hasClass('icon-playVoice')||$(this).hasClass('icon-pauseVoice')) { $(this).addClass('icon-voiceMsg').removeClass('icon-pauseVoice').removeClass('icon-playVoice'); } }); $(event.target).removeClass('icon-pauseVoice').removeClass("icon-voiceMsg").addClass("icon-playVoice"); // event.target.src = 'nr/image/py/mobileIcon-playVoice.gif'; var url = null; /* 获取url */ $.ajax({ type: "POST", url: "/service?wdService=getCommonNrDataFilePath&wdtest=false", data: { 'id': id }, async: false, success: function (data) { url = data; }, error: function () { console.info('fail'); } }); if (GetUrlRelativePath(audioE.get(0).src) != '/service?wdService=getData&wdtest=false&path=' + url) { audioE.get(0).src = '/service?wdService=getData&wdtest=false&path=' + url; } if ($(".control-button").hasClass('icon-play')) { $(".control-button").removeClass('icon-play').addClass('icon-pause'); } audioE.get(0).play(); // if (audioE == null) { // audio = document.getElementById('player'); // /* 设置audio的url */ // audio.src = '/service?wdService=getData&wdtest=false&path=' + url; // audio.onloadedmetadata = function (e) { // audio.play(); // }; // } else { // audio.play(); // } /* 为audio添加结束事件 */ // audioE.on('ended', function (e) { // // target.src = 'nr/image/py/mobileIcon-voiceMsg.png'; // audio = null; // audioId = null; // }); } else { if ($(".control-button").hasClass('icon-pause')) { $(".control-button").removeClass('icon-pause').addClass('icon-play'); } //event.target.src = 'nr/image/py/mobileIcon-voiceMsg.png'; $(event.target).removeClass("icon-playVoice").removeClass('icon-voiceMsg').addClass("icon-pauseVoice"); audioE.get(0).pause(); // $(target).data('palyFlag', 'stoping'); audioId = $(target).attr('data-id'); } // event.cancelBubble = true; // if (event.stopPropagation) { // event.stopPropagation(); // } }); //播放暂停功能 $(".control-button").on("click", function () { if ($(".control-button").hasClass('icon-play')) { $(".control-button").removeClass('icon-play').addClass('icon-pause'); audioE.get(0).play(); $('#displayArea > .audio').eq(imgItemIndex).removeClass('icon-pauseVoice').removeClass('icon-voiceMsg').addClass('icon-playVoice'); } else { $(".control-button").removeClass('icon-pause').addClass('icon-play'); audioE.get(0).pause(); $('#displayArea > .audio').each(function () { if ($(this).hasClass('icon-playVoice')) { $(this).addClass('icon-pauseVoice').removeClass('icon-voiceMsg').removeClass('icon-playVoice'); } }); } }) //元数据加载完,设置总时长和当前播放时间 audioE.on("loadedmetadata", function () { duration = audioE.get(0).duration setTime(duration, "time"); setTime(audioE.get(0).currentTime, "nowTime"); doneW = parseFloat($(".progress-done").width()); doneLeft = parseFloat($(".progress-done").offset().left); nowTimeLeft = parseFloat(doneW + doneLeft - nowTimeW / 2); setnowTimeLeft("nowTime", nowTimeLeft); }) //当前播放时间改变时 audioE.on("timeupdate", function () { if (!drag) { var currentTime = audioE.get(0).currentTime; var percent = parseFloat(currentTime / duration) * 100; $(".progress-done").css({ "width": percent + "%" }); setTime(audioE.get(0).currentTime, "nowTime"); doneW = parseFloat($(".progress-done").width()); nowTimeLeft = parseFloat(doneW + doneLeft - nowTimeW / 2); setnowTimeLeft("nowTime", nowTimeLeft); } }) audioE.on("ended", function () { audioE.get(0).currentTime = 0; $('#displayArea > .audio').each(function () { if ($(this).hasClass('icon-playVoice')) { // $(this).data('palyFlag', 'stoping'); $(this).addClass('icon-voiceMsg').removeClass('icon-pauseVoice').removeClass('icon-playVoice'); } }); $(".control-button").removeClass('icon-pause').addClass('icon-play'); }) //鼠标按下nowTime时 $(".nowTime").on("mousedown", function (e) { startmoveOffsetX = e.pageX; drag = true; doneW = parseFloat($(".progress-done").width()); progressW = parseFloat($(".audioprogress-div").width()); doneW = parseFloat($(".progress-done").width()); }) //鼠标在页面滑动时 $("html").on("mousemove", function (e) { if (drag) { moveingOffsetX = e.pageX - startmoveOffsetX; if (parseFloat(doneW + moveingOffsetX) > progressW) { $(".progress-done").css({ "width": "100%" }); doneW = parseFloat($(".progress-done").width()); nowTimeLeft = parseFloat(doneW + doneLeft - nowTimeW / 2); setnowTimeLeft("nowTime", nowTimeLeft); } else if (parseFloat(doneW + moveingOffsetX) < 0) { $(".progress-done").css({ "width": "0%" }); nowTimeLeft = parseFloat(doneW + doneLeft - nowTimeW / 2); setnowTimeLeft("nowTime", nowTimeLeft); } else { doneWP = parseFloat(parseFloat(doneW + moveingOffsetX) / progressW) * 100; $(".progress-done").css({ "width": doneWP + "%" }); var doneNW = parseFloat($(".progress-done").width()); nowTimeLeft = parseFloat(doneNW + doneLeft - nowTimeW / 2); setnowTimeLeft("nowTime", nowTimeLeft); } } }); //松开鼠标时 $("html").on("mouseup", function (e) { if (drag) { audioE.get(0).currentTime = parseFloat(doneWP / 100 * duration); } drag = false; }) } }); $('#ssEditor').load("/service?wdService=getCommonNrDataFile&wdtest=false&id=" + id, null, function () { var audios = document.querySelectorAll('.audio'); // $('#ssEditor').css("display","block"); // $('#ssEditor').css("background","#fff"); $('#ssEditor > .item').css("height", "50px"); $('#ssEditor > .item').css("width", "50px"); $('#ssEditor > .item').css("margin", "0px"); $('#ssEditor > .item').css("border", "solid 0px #CCCCCC"); $("#ss").click(); // 2、为音频图标添加事件 $('#ssEditor > .audio') .on( 'click', function (event) { var target = event.target; /* 变换图片 */ var playFlag = $(event.target) .data('palyFlag'); // 播放器 var audio = document .getElementById('player'); if (playFlag == null || '' == playFlag || 'stoping' == playFlag) { var id = $(event.target).attr( 'data-id'); if (id != audioId) { audio = null; } $(event.target).data( 'palyFlag', 'playing'); event.target.src = 'nr/image/py/mobileIcon-playVoice.gif'; var url = null; /* 获取url */ $.ajax({ type: "POST", url: "/service?wdService=getCommonNrDataFilePath&wdtest=false", data: { 'id': id }, async: false, success: function ( data) { url = data; }, error: function () { console .info('fail'); } }); if (audio == null) { audio = document .getElementById('player'); /* 设置audio的url */ audio.src = '/service?wdService=getData&wdtest=false&path=' + url; audio.onloadedmetadata = function ( e) { audio.play(); }; } else { audio.play(); } /* 为audio添加结束事件 */ $(audio).on('ended', function (e) { $(target) .data( 'palyFlag', 'stoping'); target.src = 'nr/image/py/mobileIcon-voiceMsg.png'; audio = null; audioId = null; }); } else { event.target.src = 'nr/image/py/mobileIcon-voiceMsg.png'; audio.pause(); $(target).data('palyFlag', 'stoping'); audioId = $(target).attr( 'data-id'); } event.cancelBubble = true; if (event.stopPropagation) { event.stopPropagation(); } }); }); } /*打开录音页面*/ function openRecordWindow(id) { var url = window.location.protocol + '//' + window.location.host + '/main/editor/record.jsp' + '?id=' + id; window.open(url, "_blank", "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400"); } function openWriteWindow(id) { var url = window.location.protocol + '//' + window.location.host + '/main/editor/handwritten.jsp' + '?id=' + id; window.open(url, "_blank", "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=700, height=600"); }