在移动或者PC页面上使用类似于微信语音播放功能

最新推荐文章于 2024-05-23 17:03:58 发布

tywangh

最新推荐文章于 2024-05-23 17:03:58 发布

阅读量2.2k

点赞数

分类专栏：前端文章标签： js 微信语音播放 jsp jquery

本文链接：https://blog.csdn.net/qq_20565303/article/details/78072707

版权

前端专栏收录该内容

18 篇文章 3 订阅

订阅专栏

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

tywangh

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
在移动或者PC页面上使用类似于微信语音播放功能

1、首先看看页面截图：功能：（1）根据语音的长度自动展示出语音的时长，而且未播放时，语音条后面有个小红点，表示未播放（2）当点击语音条时，会播放相应的语音，语音条并且会变成动态播放状态，类似于接收到的微信播放一样（3）在播放状态，点击语音条时，将停止播放，并不是暂停，然后再点击语音条时，将重新重头播放2、功能实现：此界面的代码：
复制链接

扫一扫

专栏目录