带暂停功能的音频播放代码参考

1、页面来源：sentenceExercise07.jsp

2、页面效果

3、源代码

<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<%@ include file="/pages/exercise/exerciseFrame.jsp"%><!-- 中间独立的部分 --><style type="text/css">
.question_answer {
width: 250px;height: 60px;display:inline-block;text-align:center;color:white;overflow:hidden;
line-height: 25px;vertical-align: middlel;background-color: #f7931e;cursor: pointer;
border-radius: 10px 10px 10px 10px;
}
.question_answer div{
line-height:25px;text-align:center;
}
.question_answer_unselected {
background-color: #f7931e;
}
.question_answer_unselected:hover{
background-color: #F15A24;
}
.question_answer_selected{
background-color: #008000;
}.answer_container{
width: 260px; height: 60px; padding: 5px 0; text-align: center;
border-radius: 10px 10px 10px 10px;
}.answer_container_left{
background-color: gray;
}.answer_container_right{
background-color: gray;cursor: pointer;
}
.judge_img{
width:30px;height:30px;position:absolute;top:0px;left:0px;
}
.show_answer{visibility:hidden;margin-top:20px;margin-left:10px;"}
/*播放按钮*/.play_btn{
width:30px;
height:30px;
cursor:pointer;
border:none;background: none;
background: url("<c:url value='/images/button_play.png'/>") 0px 0px no-repeat;
}
.play_btn:hover{
background-position: 0px -44px;
}
.play_btn:active{
background-position: 0px -88px;
}
.play_btn-diasbled{
border:none;background: none;
background: url("<c:url value='/images/button_play.png'/>") 0px -132px no-repeat;
}/*暂停按钮*/
.pause_btn{
cursor:pointer;border:none;background: none;
background: url("<c:url value='/images/button_pause.png'/>") 0px 0px no-repeat;
}
.pause_btn:hover{
background-position: 0px -44px;
}
.pause_btn:active{
background-position: 0px -88px;
}
.pause_btn-diasbled{
border:none;background: none;
background: url("<c:url value='/images/button_pause.png'/>") 0px -132px no-repeat;
}
</style>
<script type="text/javascript">
var PLAYER_STATUS_STOP = 0;//停止
var PLAYER_STATUS_PLAYING = 1;//正在播放
var PLAYER_STATUS_PAUSE = 2;//暂停
var _movieName = "exerciseAudioPlayer";//flash播放器name
var _playerStatus = PLAYER_STATUS_STOP;//播放状态
var _isLoading = false;//是否正在加载音频
var _audioLength = 0;//音频长度
var audioPlay = null;//计时$.audioToEndBySec = function(){audioPlay=setTimeout(function(){$.audioToEndBySec();},1000);	 if(_audioLength==0){//停止计时clearTimeout(audioPlay);playToEnd();}else{_audioLength--;}
};
/*** MP3准备完毕可以开始播放*/
function onAudioPrepared(){_isLoading = false;if (_playerStatus == PLAYER_STATUS_PAUSE) {//暂停状态直接返回return;}_playerStatus = PLAYER_STATUS_PLAYING;thisMovie(_movieName).playAudio();var length = thisMovie(_movieName).getAudioLength();//ms_audioLength = parseInt(length/1000)+2;//ms to m$.audioToEndBySec();}/*** 暂停播放*/
function karaokePlayPause(){if (_playerStatus == PLAYER_STATUS_PLAYING) {_playerStatus = PLAYER_STATUS_PAUSE;thisMovie(_movieName).pauseAudio();clearTimeout(audioPlay);}
}
/*** 继续播放*/
function karaokePlayContinue(){if (_playerStatus == PLAYER_STATUS_PAUSE) {_playerStatus = PLAYER_STATUS_PLAYING;if (_isLoading) {//如果正在加载音频，直接返回return;}thisMovie(_movieName).continuePlayAudio();$.audioToEndBySec();}
}
/*** 播放结束*/
function playToEnd(){_playerStatus = PLAYER_STATUS_STOP;$("#middleContent" + _currentIndex).find(".play_btn").removeClass("pause_btn");
}//根据题目序号获取中间部分内容
$.getMiddleContent = function(index){var content = $("#middleContent").clone();content.attr("id", "middleContent" + index);for (var i in _exerciseItemVoArray[index].exerciseSentenceVoList) {var sentence = _exerciseItemVoArray[index].exerciseSentenceVoList[i].sentence;var item = $('<tr><td class="answer_td"><div class="answer_container answer_container_left"><div class="question_answer question_answer_unselected font-18"><table style="height:100%;"><tr><td><div></div></td></tr></table></div></div></td></tr>');item.find("div.question_answer").attr("title", sentence);if (sentence.length > 45) {sentence = sentence.substring(0, 45) + "...";}item.find("div.question_answer").find("div").text(sentence);item.find("div.question_answer").attr("displayOrder", _exerciseItemVoArray[index].exerciseSentenceVoList[i].displayOrder);item.find("div.answer_container").attr("displayOrder", _exerciseItemVoArray[index].exerciseSentenceVoList[i].displayOrder);item.find("td.answer_td").css("padding", "5px 8px");item.find("td.answer_td").css("text-align", "center");content.find("table.answer_table:first").append(item);//容器var itemContainer = $('<tr><td><div class="answer_container answer_container_right"></div></td></tr>');itemContainer.find("td.answer_td").css("padding", "5px 8px");itemContainer.find("td.answer_td").css("text-align", "center");content.find("table.answer_table:last").append(itemContainer);}//设置播放录音位置var playerBtnTop = 80 * _exerciseItemVoArray[index].exerciseSentenceVoList.length / 2 - 20;content.find(".play_btn").css("top", playerBtnTop);//点击选中事件content.find("div.question_answer").click(function(){if (_haveFinished) {return;//已提交}if (!$(this).hasClass("question_answer_selected")) {var selected = content.find(".question_answer_selected");if (selected.length > 0) {var selectedContainer = selected.parent();var thisContainer = $(this).parent();selected.removeClass("question_answer_selected");selected.addClass("question_answer_unselected");}//设置选中状态$(this).removeClass("question_answer_unselected");$(this).addClass("question_answer_selected");}});//移动句子事件触发content.find("div.answer_container_right").click(function(){if (_haveFinished) {return;//已提交}if ($(this).children("div.question_answer").length > 0) {return;}var selected = content.find("div.question_answer_selected");if (selected.length > 0) {$(this).append(selected);}var currentItemNumber = $(".exercise_item_number[index='" + index + "']");if (!currentItemNumber.hasClass("exercise_item_number_do")) {currentItemNumber.addClass("exercise_item_number_do");}});//移动句子事件触发(往左移动)content.find("div.answer_container_left").click(function(){if (_haveFinished) {return;//已提交}if ($(this).children("div.question_answer").length > 0) {return;}var selected = content.find("div.question_answer_selected");if (selected.length > 0) {$(this).append(selected);}var currentItemNumber = $(".exercise_item_number[index='" + index + "']");if (!currentItemNumber.hasClass("exercise_item_number_do")) {currentItemNumber.addClass("exercise_item_number_do");}});//播放音频事件content.find(".play_btn").click(function(){var audioUrl = "audio/" + _exerciseItemVoArray[index].audioId + ".mp3";if ($(this).hasClass("pause_btn")) {//暂停播放$(this).attr("title", "继续播放");karaokePlayPause();$(this).removeClass("pause_btn");} else {$(this).addClass("pause_btn");$(this).attr("title", "暂停");if (_playerStatus == PLAYER_STATUS_STOP) {_isLoading = true;thisMovie(_movieName).loadMp3Audio(audioUrl , "onAudioPrepared");} else {karaokePlayContinue();}}});return content;
};//获取用户答案信息
$.getUserAnswer = function(index){var exerciseItemId = _exerciseItemVoArray[index].id;var answer = "";var answerArray = new Array();var isCorrect = true;var keyArray = _exerciseItemVoArray[index].answer.split(",");$("#middleContent" + index).find(".answer_container_right").each(function(aindex){var itemCorrect = true;var answerId = $(this).children("div.question_answer").attr("displayOrder");if (answerId!=keyArray[aindex]) {isCorrect = false;itemCorrect = false;}if(answerId==undefined){answerId = "";}answerArray.push({"answer":answerId,"itemCorrect":itemCorrect});});var currentItemNumber = $(".exercise_item_number[index='" + index + "']");if (!currentItemNumber.hasClass("exercise_item_number_do")) {answerArray = "";}return {"exerciseItemId" : exerciseItemId, "answer" : answerArray, "isCorrect" : isCorrect};
};//看答案事件
$.showStandardAnswer = function(index) {var rightAnswerArray = _exerciseItemVoArray[index].answer.split(",");;//IDs//answerEle = $("#middleContent" + index).find(".question_answer[answerId='" + rightAnswer + "']");$("#middleContent" + index).find(".answer_container_left").each(function(ind){var item = $("#middleContent" + index).find(".question_answer[displayOrder='" + rightAnswerArray[ind] + "']").clone();item.attr("displayOrder","-1").css("display","inline-block");item.removeClass("question_answer_selected").addClass("question_answer_unselected");$(this).find(".question_answer").hide();$(this).append(item);});$("#middleContent" + index).find(".show_answer").css("visibility","visible");
};//根据用户之前的做题记录还原做题答案
$.showUserRecentAnswer = function(index){var userAnswer = _exerciseItemVoArray[index].userAnswer;if(userAnswer!=""){var userAnswerObj = JSON.parse(userAnswer);for(var i=0;i<userAnswerObj.length;i++){if(userAnswerObj[i].answer != "" ){$("#middleContent" + index).find(".answer_container_left").eq(userAnswerObj[i].answer).find(".question_answer").click();$("#middleContent" + index).find(".answer_container_right").eq(i).click();}}}$.showAnswerResult(index);
}//判断对错
$.showAnswerResult = function(index){var keyArray = _exerciseItemVoArray[index].answer.split(",");$("#middleContent" + index).find(".answer_container_right").each(function(aindex){var answerId = $(this).children("div.question_answer").attr("displayOrder");//定义父元素var answerEle = $(this);if(answerEle.find(".judge_img").length>0){return;}var top = answerEle.position().top;var left = answerEle.position().left;var width = answerEle.width();var height = answerEle.height();var judgeIcon = $('<img class="judge_img" src="<s:url value='/images/icon_correct.png'/>">');judgeIcon.css("top", top+(height-30)/2);judgeIcon.css("left", left + width + 15);if (answerId!=keyArray[aindex]) {judgeIcon.attr("src", "<s:url value='/images/icon_error.png'/>");}answerEle.append(judgeIcon);});};$().ready(function(){//题号点击事件$(".exercise_item_number").click(function(){karaokePlayPause();playToEnd();});
});
//flash播放器加载完回调
function onPlayerCompleted(){//与流媒体服务器建立连接var rtmpServerUrl = "${rtmpServerUrl}";thisMovie(_movieName).setRtmpServerURL(rtmpServerUrl);
}function thisMovie(movieName) {if (navigator.appName.indexOf("Microsoft") != -1) {return window[movieName];}else {return document[movieName];}
}
</script><!-- 隐藏的ActionScript播放器类  -->
<object style="width: 1px; height: 1px;position: absolute; top:0px; left:0px;" type="application/x-shockwave-flash" data="<c:url value='/flash/NetStreamAudioPlayerAS.swf?onLoadCompleted=onPlayerCompleted'/>" name="exerciseAudioPlayer" id="exerciseAudioPlayer" ><param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="<c:url value='/flash/NetStreamAudioPlayerAS.swf?onLoadCompleted=onPlayerCompleted'/>" /><param name="quality" value="high" /><param name="scale" value="noScale" /><param name="wmode" value="transparent" />
</object><div style="display: none;">
<div id="middleContent"><div><p class="font-18 font-gray" style="font-weight: bold;">按你听到得顺序选中句子并点击右边空白框进行排序。</p></div><div class="show_answer font-18 font-right">正确答案：</div><div style="width: 100%;overflow: hidden;"><table style="float:left; width: 44%;" class="answer_table"> <!-- 选项 --></table><div style="float: left; width: 8%;text-align: center;"><input id="play_btn"  type="button" class="play_btn" style="position: relative; " title="听录音"/></div><table style="float:left; width: 44%" class="answer_table"> <!-- 空白 --></table><div style="float: left; width: 4%;text-align: center;height:50px;"></div></div>
</div>
</div>

4、注意音频的类型不是固定的

a、上传的音频一般是.mp3

b、录音的音频一般是.flv

audio表

==================================================================

[背诵记录]带暂停的音频播放

recitationRecordDialoge.jsp源代码

<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<script language="javascript" type="text/javascript" src="<s:url value='/plugin/artDialog4.1.7/jquery.artDialog.source.js?skin=simple'/>"></script>
<script language="javascript" type="text/javascript" src="<s:url value='/plugin/artDialog4.1.7/plugins/iframeTools.source.js'/>"></script><style>
.read_container{padding:20px;
}
.play_btn {width: 30px;height: 30px;cursor: pointer;border: none;background: url("/images/button_play.png") 0px 0px no-repeat;
}.pause_btn {cursor: pointer;border: none;background: url("/images/button_pause.png") 0px 0px no-repeat;
}</style><script type="text/javascript">
var PLAYER_STATUS_STOP = 0;//停止
var PLAYER_STATUS_PLAYING = 1;//正在播放
var PLAYER_STATUS_PAUSE = 2;//暂停
var _movieName = "recitationAudioPlayer";//flash播放器name
var _playerStatus = PLAYER_STATUS_STOP;//播放状态
var _isLoading = false;//是否正在加载音频
var _audioLength = 0;//音频长度
var audioPlay = null;//计时$.audioToEndBySec = function(){audioPlay=setTimeout(function(){$.audioToEndBySec();},1000);	 if(_audioLength==0){//停止计时clearTimeout(audioPlay);playToEnd();}else{_audioLength--;}
};
/*** MP3准备完毕可以开始播放*/
function onAudioPrepared(){_isLoading = false;if (_playerStatus == PLAYER_STATUS_PAUSE) {//暂停状态直接返回return;}_playerStatus = PLAYER_STATUS_PLAYING;thisMovie(_movieName).playAudio();var length = thisMovie(_movieName).getAudioLength();//ms_audioLength = parseInt(length/1000)+2;//ms to m$.audioToEndBySec();}/*** 暂停播放*/
function karaokePlayPause(){if (_playerStatus == PLAYER_STATUS_PLAYING) {_playerStatus = PLAYER_STATUS_PAUSE;thisMovie(_movieName).pauseAudio();clearTimeout(audioPlay);}
}
/*** 继续播放*/
function karaokePlayContinue(){if (_playerStatus == PLAYER_STATUS_PAUSE) {_playerStatus = PLAYER_STATUS_PLAYING;if (_isLoading) {//如果正在加载音频，直接返回return;}thisMovie(_movieName).continuePlayAudio();$.audioToEndBySec();}
}
/*** 播放结束*/
function playToEnd(){_playerStatus = PLAYER_STATUS_STOP;$("#play_btn").removeClass("pause_btn");
}$().ready(function(){//点击播放$("#play_btn").click(function( evt ){evt.preventDefault();var audioId = $(this).attr("audioId");var homeworkRecordId =art.dialog.data('homeworkRecordId');	var audioUrl = "audio/" + audioId + ".flv";if ($(this).hasClass("pause_btn")) {//暂停播放$(this).attr("title", "继续播放");karaokePlayPause();$(this).removeClass("pause_btn");} else {$(this).addClass("pause_btn");$(this).attr("title", "暂停");if (_playerStatus == PLAYER_STATUS_STOP) {_isLoading = true;thisMovie(_movieName).loadMp3Audio(audioUrl , "onAudioPrepared");} else {karaokePlayContinue();}}});});//flash播放器加载完回调
function onPlayerCompleted(){//与流媒体服务器建立连接var rtmpServerUrl = "${rtmpServerUrl}";thisMovie(_movieName).setRtmpServerURL(rtmpServerUrl);
}function thisMovie(movieName) {if (navigator.appName.indexOf("Microsoft") != -1) {return window[movieName];}else {return document[movieName];}
}</script><!-- 隐藏的ActionScript播放器类  -->
<object style="width: 1px; height: 1px;position: absolute; top:0px; left:0px;" type="application/x-shockwave-flash" data="<c:url value='/flash/NetStreamAudioPlayerAS.swf?onLoadCompleted=onPlayerCompleted'/>" name="recitationAudioPlayer" id="recitationAudioPlayer" ><param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="<c:url value='/flash/NetStreamAudioPlayerAS.swf?onLoadCompleted=onPlayerCompleted'/>" /><param name="quality" value="high" /><param name="scale" value="noScale" /><param name="wmode" value="transparent" />
</object><div class="read_container"><div><span class="font-18" style="font-weight: bold;">背诵记录</span></div><hr style="margin:0;" class="hr-long-orange"><div><s:if test="recitationVoList.size > 0"><table><s:iterator value="recitationVoList" var="recitationVo" status="st"><tr><td style="width: 10px;">${st.index+1}.</td><td>${recitationVo.blockTitle}</td><td><input id="play_btn" audioId="${recitationVo.audioId}" type="button" class="play_btn" title="继续播放"></td></tr></s:iterator></table></s:if><s:else><span style="margin-top: 20px;display: block;">还没有背诵记录！</span></s:else></div>
</div>