移动端语音播放以及语音条拖动的实现

最新推荐文章于 2024-04-01 16:42:54 发布

tywangh

最新推荐文章于 2024-04-01 16:42:54 发布

阅读量1.9k

点赞数

分类专栏：前端文章标签：移动端 audio 语音条 js 语音播放

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

版权

前端专栏收录该内容

18 篇文章 3 订阅

订阅专栏

移动端语音播放，包含了语音播放动态小喇叭，语音条，时间长度，支持移动端触动拖动，不支持PC拖动。

类似于微信公众号里面的语音播放，效果如下：

进入页面：

播放时：

页面代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>阅读详情</title>
    <link rel="stylesheet" type="text/css" href="css/read-detail.css">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="audio.css">
</head>
<body>
    <div class="nav">
        <a href="" class="return"></a>
        <a href="" class="close">关闭</a>
        <p>《靠谱》</p>
    </div>
    <div class="voice">
        <div class="gif">
            <img id="images" src="images/static.png" alt="" οnclick="">
			<audio controls="controls" preload="auto" id='audio' src="music.mp3" hidden="true"></audio>
        </div>
        <div class="right">
            <p>听读：第五幕</p>
            <div id="touchline" class="speed">
                <div class="timeline">
                    <div class="circle">
                    </div>
                </div>
            </div>
			<div class="num">
					<span class="currentTime">00:00</span>
                    <span class="timeAll">00:00</span>
            </div>
        </div>
    </div>
    <div class="content">
        <p>但是因为滤镜的兼容性问题，最好是不要用，你可以用ps做图的时候，把背景调一下透明度后导成png格式的图片就行了</p>
        <p>如果透明的背景颜色一样的话，那么你可以切成1px*1px大小的png图片平铺，gif只支持透明度100%也就是完全透明的图片</p>
        <p>半透明的不支持，而png格式的图片则不存在什么问题</p>
        <p>唯一会有问题的地方就只是IE6不兼容透明png格式而已，我的百度空间有解决IE6透明的问题</p>
    </div>
    <div class="bottom">
        <div class="left">
            <a href="#">
                <span></span>
                上一章
            </a>
        </div>
        <div class="center">
            <a href="#">
               <i></i>
                目录
            </a>
        </div>
        <div class="right">
            <a href="#">
                下一章
                <b></b>
            </a>
        </div>


    </div>
</body>
<script type="text/javascript" src="jquery.1.9.1.min.js"></script>
<script>
$(document).ready(function(){

	<!-- var ProcessNow = 0; -->
	var audio = document.getElementById("audio");
	//当媒体加载完成后，自动将媒体的时间长度自动更新到页面
	audio.addEventListener('loadedmetadata', function () {
		$(".timeAll").html(timeFormat(audio.duration));
	}, true);
	audio.addEventListener("canplaythrough",
		function() {
		　　$(".timeAll").html(timeFormat(audio.duration));
		},
		false);
	//点击图片触发播放或者暂停状态
	$("#images").on('click',function(){
		if(audio.paused){
			Play();
		}else{
            Pause();
		}
	})
	var lineStart = $("#touchline").offset().left;
	var lineWidth = $("#touchline").width();
	var lineEnd = lineStart+lineWidth;
	var currentTime = audio.currentTime;
	var timeAll = audio.duration;
	//监听音频播放完毕事件
	audio.addEventListener('ended', function () {
		document.getElementById("images").src="images/static.png";
	}, false);
	//音频开始播放方法
	function Play() {
        audio.play();
		document.getElementById("images").src="images/voice.gif";
        TimeSpan();
    }
	//音频暂停播放
    function Pause() {
        audio.pause();
		document.getElementById("images").src="images/static.png";
    } //Pause()

	//使用setInterval重复读取播放时间进度，从而更新进度条
	function TimeSpan() {
        var playload = setInterval(function () {
			currentTime = audio.currentTime;
	        timeAll = audio.duration;
			console.log(currentTime);
            var ProcessNow = (currentTime / timeAll) * lineWidth;
            $(".circle").css("width", ProcessNow);
            var currentTimeFm = timeFormat(currentTime);
            var timeAllFm = timeFormat(timeAll);
            $(".currentTime").html(currentTimeFm);
			$(".timeAll").html(timeAllFm);
			//触发setInterval停止循环，然后将时间和进度条初始化
			if(currentTime >= timeAll){
				$(".circle").css("width", 0);
				$(".currentTime").html("00:00");
				console.log(11111);
				clearInterval(playload);
			}
            }, 1000);
    }
	//将获取的时间格式化
	function timeFormat(number) {
        var minute = parseInt(number / 60);
        var second = parseInt(number % 60);
        minute = minute >= 10 ? minute : "0" + minute;
        second = second >= 10 ? second : "0" + second;
        return minute + ":" + second;
    }

	//手势监听事件touchline
	var x;//触摸的位置
	var scale;//音频播放的百分比
	var touchline = document.getElementById("touchline");
	touchline.addEventListener('touchstart', function(evt) {
		if(audio.pause||audio.ended){
			Play();
		}
		var touch=evt.touches[0];
		x=parseInt(touch.pageX);
	    if(x<lineStart){
			x = lineStart;
		}
		scale = (x - lineStart)/lineWidth;
		audio.currentTime = scale * audio.duration;
	}, true);

	touchline.addEventListener("touchmove",function(evt){
	   evt.preventDefault();
	   var touch=evt.touches[0];
	   x=parseInt(touch.pageX);
	   if(x>lineEnd){
			x = lineEnd;
	   }
	   scale = (x - lineStart)/lineWidth;
	   $(".circle").css("width", scale*lineWidth);
	},true)
	
	touchline.addEventListener("touchend",function(evt){
	   audio.currentTime = scale * audio.duration;
	   touchline.addEventListener("touchmove",null);
	},true)
})
</script>
</html>

资源地址：http://download.csdn.net/download/qq_20565303/10031782