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

来源：互联网发布：win7隐藏网络连接编辑：程序博客网时间：2024/05/17 22:44

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);"                    onclick="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

阅读全文

0 0