1、首先看看页面截图:
功能:
(1) 根据语音的长度自动展示出语音的时长,而且未播放时,语音条后面有个小红点,表示未播放
(2) 当点击语音条时,会播放相应的语音,语音条并且会变成动态播放状态,类似于接收到的微信播放一样
(3)在播放状态,点击语音条时,将停止播放,并不是暂停,然后再点击语音条时,将重新重头播放
2、功能实现:
此界面的代码:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ page trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags" %>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${wechatGroupInvited.pageName}</title>
<link rel="stylesheet" href="/media/invitedpage/css/index.css">
<script src="/active/js/jquery.min.js"></script>
</head>
<body>
<div class="banner">
<img src="${wechatGroupInvited.topImgUrl}" alt="">
</div>
<div class="voice">
<div class="voice-cont">
<div class="top">
<span></span>
<p>语音</p>
</div>
<div class="bottom">
<div class="pho">
<img src="${wechatGroupInvited.headImgUrl}" alt="">
</div>
<div class="mes">
<img id="mes" src="/media/invitedpage/img/mes_noread.png" href="javascript:void(0);"
οnclick="music.changeClass(this,'audio-mes');" data-mask="true">
<audio id="audio-mes" preload="auto" src="${wechatGroupInvited.voiceUrl}" hidden="true"></audio>
</div>
<p id="time-size"></p>
</div>
</div>
</div>
<div class="detail">
<div class="detail-cont">
<div class="top">
<span></span>
<p>创建人介绍</p>
</div>
<div class="bottom">
<div class="pho">
<img src="${wechatGroupInvited.headImgUrl}" alt="">
</div>
<div class="introduce">
<p>${wechatGroupInvited.introduce}</p>
</div>
</div>
</div>
</div>
<button ><a href="${wechatGroupInvited.addGroupUrl}">我要入群</a></button>
</body>
<script type="text/javascript">
var music = {
changeClass: function (target,id) {
var imgSrc = $("#mes")[0].src.split("/img/")[1];
var ids = document.getElementById(id);
if(imgSrc == 'mes_noread.png'){
ids.play();
document.getElementById("mes").src="/media/invitedpage/img/mes_reading.gif";
}else if(imgSrc == 'mes_reading.gif'){
ids.pause();
ids.currentTime = 0.0;
document.getElementById("mes").src="/media/invitedpage/img/mes_read.png";
}else if(imgSrc == 'mes_read.png'){
ids.play();
document.getElementById("mes").src="/media/invitedpage/img/mes_reading.gif";
}
}
}
var audio = document.getElementById("audio-mes");
//监听音频播放完毕事件
audio.addEventListener('ended', function () {
document.getElementById("mes").src="/media/invitedpage/img/mes_read.png";
}, false);
//获取音频的总时长
var times;
audio.ondurationchange = function(){
times = parseInt(audio.duration);
// alert(parseInt(audio.duration));
$("#time-size").html(times+'\'\'');
};
function playCotrol() {
audio.addEventListener("loadeddata",
function() {
$("#control").addClass("play").removeClass("color_gray");
$("#control").html("点击播放");
addListenTouch(); //歌曲加载之后才可以拖动进度条
var allTime = audio.duration;
timeChange(allTime, "allTime");
setInterval(function() {
var currentTime = audio.currentTime;
$("#time .currentTime").html(timeChange(currentTime, "currentTime"));
}, 1000);
clicks();
}, false);
audio.addEventListener("pause",
function() { //监听暂停
$("#control").addClass("play").removeClass("pause");
$("#control").html("点击播放");
if (audio.currentTime == audio.duration) {
audio.stop();
audio.currentTime = 0;
}
}, false);
audio.addEventListener("play",
function() { //监听暂停
$("#control").addClass("pause").removeClass("play");
$("#control").html("暂停播放");
dragMove();
}, false);
audio.addEventListener("ended", function() {
alert(0)
}, false)
}
//绑定timeupdate事件
// audio.addEventListener('timeupdate',function(){
// if (!isNaN(times)) {
// update-time = audio.currentTime;//获取实时时间
// $("#time-size").html(update-time+'\'\'');
// };
// },false);
// $(function(){
// $('.mes').click(function(){
// });
// });
</script>
</html>
样式demo:
因为涉及的页面中包含了kindeditor,上传图片和语音,然后所有页面是jsp,下载后不能直接执行,主要看里面的代码就好了。
可以直接找我,我帮忙下载,不用分。
下载地址:http://download.csdn.net/download/qq_20565303/9992139