句子录音打分代码参考

最新推荐文章于 2023-04-13 02:34:29 发布
gqltt
最新推荐文章于 2023-04-13 02:34:29 发布
阅读量1.3k
点赞数 1
分类专栏：工作项目 JavaScript
本文链接：https://blog.youkuaiyun.com/listeningsea/article/details/39665831
版权
工作项目同时被 2 个专栏收录
15 篇文章
订阅专栏
JavaScript
13 篇文章
订阅专栏
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获取到对应的wordRecordJson
		var 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>