1、頁面名稱:sentenceReadRecordDialogAnyone.jsp

2、頁面效果

3、頁面源碼

<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%> <%@ include file="/common/taglibs.jsp"%><script language="javascript" type="text/javascript" src="<c:url value='/scripts/course/sentenceReadRecordDialog.js'/>"></script><script type="text/javascript" charset="UTF-8">var RANK_PRIMARY = 1;//初級的 var RANK_MIDDLE = 2;//中級的 var RANK_ADVANCED = 3;//高級的var _wordReadRecordVoArray = JSON.parse('${wordReadRecordVoListJson }'); var wordRecordDialog = null; var _rank = parseInt("${rank}"); var _starCount = parseInt("${starCount}");$(document).ready(function() {if (_starCount > 0) {$("#scoreStarPlus").show();setTimeout(function(){$("#scoreStarPlus").fadeOut(1500);}, 1000);}//加載錄音代碼if ($("#aVoiceRecordFlash").length <= 0) {$.ajax({url: "<c:url value='/course/loadRecordCode.action'/>",type: "GET",success: function(response) {$("body").append(response);}});}//收藏按鈕狀態初始化var collected = "${sentenceVo.collected }";if(collected && collected == "true") {$("#sentence_collected").show();$("#sentence_uncollected").hide();}//句子狀態行為初始化$.initSentenceContent = function(){$("#sentence_content").find("span[type='word']").each(function(){var score = $(this).attr("score");var word = $(this).text().trim();var wordId = $(this).attr("id");if (_rank == RANK_ADVANCED) {if (score >= 0) {$(this).attr("title", "得分:" + score);} else {$(this).attr("title", "未識別");}}$(this).css("cursor","pointer");//低分單詞變色if(score && score < 0) {$(this).addClass("font-color-bad");}//添加單詞點擊事件 $(this).click(function(){$.showWordReadRecordDialog(wordId, word);});});};$.initSentenceContent();//單詞打分結果對話框 index單詞在句子中的索引，word單詞內容$.showWordReadRecordDialog = function(wordId, wordContent){//根據wordId獲取到對應的wordRecordJsonvar wordReadRecordVoJson = "{}";for (var i in _wordReadRecordVoArray) {if (wordId == _wordReadRecordVoArray[i].wordId) {wordReadRecordVoJson = JSON.stringify(_wordReadRecordVoArray[i]);break;}}// 初始化一個帶有loading圖標的空對話框if (!wordRecordDialog) {wordRecordDialog = art.dialog({id: "wordRecordDialog",fixed: true,close:function(){wordRecordDialog = null;return true;}});}var requestUrl = "<c:url value='/course/loadWordReadRecordDialog.action'/>";$.ajax({url: requestUrl,data: "wordReadRecordVoJson=" + encodeURIComponent(wordReadRecordVoJson) + "&wordContent=" + wordContent + "&sentenceReadVoiceId=${sentenceReadRecordVo.readVoiceId }&sentenceId=${sentenceId}",type: "GET",cache: false,success: function(response) {if(wordRecordDialog != null) {wordRecordDialog.content(response);var wordDialogTop = '${wordDialogTop == null ? "230" : wordDialogTop}';try {if(top.art.dialog.data("leftPos")){var leftPos = top.art.dialog.data("leftPos"); wordRecordDialog.position(leftPos, wordDialogTop + "px");}else{wordRecordDialog.position("50%", wordDialogTop + "px");}} catch (e) {wordRecordDialog.position("50%", wordDialogTop + "px");}}}});};//中文翻譯按鈕事件$("#translation_btn").click(function(){if ($(this).hasClass("eng")) {if ($("#sentence_content_karaoke").find("c:first").attr("class")) {$("#sentence_content").hide();$("#sentence_content_karaoke").show();} else {$("#sentence_content").show();$("#sentence_content_karaoke").hide();}$("#sentence_content_trans").hide();$(this).removeClass("eng");$(this).attr("title", "查看翻譯");} else {$("#sentence_content").hide();$("#sentence_content_karaoke").hide();$("#sentence_content_trans").show();$(this).addClass("eng");$(this).attr("title", "查看原文");}});//收藏按鈕事件$("#sentence_collected").click(function(){$.ajax({url: "<c:url value='/base/sentenceCollectOrNot.action?isCollected=true&sentenceId='/>${sentenceVo.id }",type: "POST",dataType: "json",success: function(response){if(response && response.message) {//成功$("#sentence_collected").hide();$("#sentence_uncollected").show();}}});});//未收藏按鈕事件$("#sentence_uncollected").click(function(){$.ajax({url: "<c:url value='/base/sentenceCollectOrNot.action?isCollected=false&sentenceId='/>${sentenceVo.id }",type: "POST",dataType: "json",success: function(response){if(response && response.message) {//成功$("#sentence_collected").show();$("#sentence_uncollected").hide();}}});});//跟讀練習$("#sentence_listen_and_record_btn").click(function(){//停止播放srrd.thisMovie("sentenceMp3Player").stopAudio();srrd.karaokePlayStop();if (wordRecordDialog != null) {wordRecordDialog.close();}$("#scoreResultImg").hide();$("#scoreResultDescription").hide();var content = $("#sentence_content").text().trim();$.aShowVoiceRecordDialog(content, function(voiceId,recordDuringTime){if (voiceId) {$.ajax({url: "<c:url value='/course/gradeVoiceRecordAnyone.action'/>",data: "sentenceId=${sentenceId }&voiceRecordId=" + voiceId+"&gradeReturnType=json&recordDuringTime="+recordDuringTime,type: "POST",dataType: "json",success: function(response){if (response.message.success) {//句子錄音打分成功_wordReadRecordVoArray = response.message.sentenceReadRecordVo.wordReadRecordVoList;var score = response.message.sentenceReadRecordVo.score;var imgSrc = "<c:url value='/images/face-sad3.png'/>";var imgDes = "還要繼續加油哦~";if (score > 0) {imgSrc = "<c:url value='/images/face-smile3.png'/>";imgDes = "嗯，很不錯啦，加油";}$("#scoreResultImg").attr("src", imgSrc);$("#scoreResultDescription").text(imgDes);$("#play_sentence_record_btn").attr("voiceId", voiceId);$("#sentence_content").html(response.message.sentenceReadRecordVo.html);$.initSentenceContent();//如果是中文翻譯狀態，切換成英文if ($("#translation_btn").hasClass("eng")) {$("#translation_btn").trigger("click");}//顯示增加智慧星if (response.message.starCount > 0) {$("#scoreStarPlus").children("span").text(response.message.starCount);$("#scoreStarPlus").show();//2014年5月6日修改bug817/*setTimeout(function(){$("#scoreStarPlus").fadeOut(1500);}, 1000);*/}}//關閉錄音對話框closeVoiceRecordDialog();},error: function(){closeVoiceRecordDialog();}});} else {//關閉錄音對話框closeVoiceRecordDialog();}}, function(){$("#scoreResultImg").show();$("#scoreResultDescription").show();});});//播放句子錄音 $("#play_sentence_record_btn").click(function(){var voiceId = $(this).attr("voiceId");var sentenceRecordAudioUrl = "record/" + voiceId + ".flv";srrd.thisMovie("sentenceMp3Player").loadAndPlayAudio(sentenceRecordAudioUrl);});//播放句子標準音頻$("#play_sentence_original_btn").click(function(){if(!$("#sentence_content_karaoke").text().trim()){var content = $("#sentence_content").text().trim();content = srrd.getSplitSentence(content);$("#sentence_content_karaoke").html(content);}//隱藏原始內容，顯示卡拉ok效果內容$("#sentence_content").hide();$("#sentence_content_trans").hide();$("#sentence_content_karaoke").show();//音頻開始和結束時間srrd.audioStartTime = "${sentenceVo.audioStartTime }".trim();srrd.audioEndTime = "${sentenceVo.audioEndTime }".trim();if (srrd.audioStartTime == "") {srrd.audioStartTime = 0;}if (srrd.audioEndTime == "") {srrd.audioEndTime = 0;}srrd.audioStartTime *= 1000;srrd.audioEndTime *= 1000;//卡拉ok持續時間，全局變量srrd.karaokeDuration = srrd.audioEndTime - srrd.audioStartTime;var sentenceAudioUrl = "audio/${sentenceVo.standardPronunciation }.mp3";//getSentencePlayerMovie("sentenceMp3Player").loadAndPlayAudio(sentenceAudioUrl, audioStartTime*1000, audioEndTime*1000);srrd.thisMovie("sentenceMp3Player").loadMp3Audio(sentenceAudioUrl, "srrd.onAudioPrepared");});});//音頻緩沖完畢 srrd.onAudioPrepared = function(){//檢測播放概率性一直持續LOG//top.//console.log("srrd.audioStartTime:" + srrd.audioStartTime + ", srrd.audioEndTime:" + srrd.audioEndTime);//top.//console.log("srrd.karaokeDuration:" + srrd.karaokeDuration);if (srrd.karaokeDuration <= 0) {srrd.karaokeDuration = srrd.thisMovie("sentenceMp3Player").getAudioLength();srrd.thisMovie("sentenceMp3Player").playAudio();} else {srrd.thisMovie("sentenceMp3Player").playAudio(srrd.audioStartTime, srrd.audioEndTime);}srrd.karaoke("#sentence_content_karaoke", srrd.karaokeDuration, function(){setTimeout(function(){//隱藏原始內容，顯示卡拉ok效果內容$("#sentence_content_karaoke").hide();if ($("#translation_btn").hasClass("eng")) {$("#sentence_content_trans").show();} else {$("#sentence_content").show();}//清除卡拉ok變色效果$("#sentence_content_karaoke").find("c").removeAttr("class");}, 200);}); };function onSentencePlayerLoadCompleted(){var rtmpServerUrl = "${rtmpServerUrl}";srrd.thisMovie("sentenceMp3Player").setRtmpServerURL(rtmpServerUrl); }</script><!-- 隱藏的ActionScript播放器類 --> <object style="width: 1px; height: 1px;position:fixed; bottom:0px; left:0px;" type="application/x-shockwave-flash" data="<c:url value='/flash/NetStreamAudioPlayerAS.swf?onLoadCompleted=onSentencePlayerLoadCompleted'/>" name="sentenceMp3Player" id="sentenceMp3Player" ><param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="<c:url value='/flash/NetStreamAudioPlayerAS.swf?onLoadCompleted=onSentencePlayerLoadCompleted'/>" /><param name="visible" value="false" /> </object><div style="width: 500px;"> <table style="height:45px; margin-bottom: 2px;margin-top: 0;position: relative;top: -10px;"><tr><td style="width: 90px;padding-left: 0;"><!-- ${sentenceReadRecordVo.score } --><span class="font-18 font-black">跟讀反饋：</span></td><td style="width: 40px;"><img id="scoreResultImg" width="30px" height="30px" src="<c:url value='/images/'/>${sentenceReadRecordVo.faceImgName }"/></td><td align="right" style="text-align: left;"><span id="scoreResultDescription" class="font-12 font-orange">${sentenceReadRecordVo.description }</span><span id="scoreStarPlus" class="font-12 font-orange" style="display: none;">智慧星 +<span>${starCount}</span></span></td></tr> </table> <div class="hr-long-orange" style="position: relative;top: -15px;"></div><!-- 句子內容 --> <div style="line-height: 1.4; margin-bottom: 30px;"><span id="sentence_content" class="font-18 font-black" style="display:block; width: 100%;">${sentenceReadRecordVo.html }</span><span id="sentence_content_karaoke" class="font-18 font-black" style="display: none;"></span><span id="sentence_content_trans" class="font-18 font-black" style="display: none;">${sentenceVo.translation }</span> </div><div style="position: absolute; bottom: 15px; width: 500px;"><!-- 下角圖標 --><div style="float: right;"><input id="play_sentence_original_btn" class="icon-button speaker" type="button" title="聽原音" /><input id="play_sentence_record_btn" class="icon-button headset" type="button" voiceId="${sentenceReadRecordVo.readVoiceId }" title="聽錄音" /><input id="sentence_listen_and_record_btn" class="icon-button mic" type="button" title="跟讀" /><input id="translation_btn" class="icon-button chn" type="button" title="查看翻譯" /><input id="sentence_collected" class="icon-button favorited" type="button" title="取消收藏" style="display: none;"/><input id="sentence_uncollected" class="icon-button favorite" type="button" title="收藏" style="display: ${empty currentUserId?'none':''}"/></div> </div> </div>

總結

以上是生活随笔為你收集整理的句子录音打分代码参考的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。