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

最新推荐文章于 2022-11-24 16:13:20 发布

gqltt

最新推荐文章于 2022-11-24 16:13:20 发布

阅读量2.3k

点赞数 1

分类专栏： JavaScript 工作项目

本文链接：https://blog.csdn.net/listeningsea/article/details/39668661

版权

工作项目同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

JavaScript

13 篇文章 0 订阅

订阅专栏

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>