移动端语音播放,包含了语音播放动态小喇叭,语音条,时间长度,支持移动端触动拖动,不支持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="css/audio.css">
- </head>
- <body>
- <p class="nav">
- <a href="" class="return">
- </a>
- <a href="" class="close">
- 关闭
- </a>
- <p>
- 《靠谱》
- </p>
- </p>
- <p class="voice">
- <p class="gif">
- <img id="images" src="images/static.png" alt="" onclick="">
- <audio id='audio' src="music.mp3" hidden="true">
- </audio>
- </p>
- <p class="right">
- <p>
- 听读:第五幕
- </p>
- <p id="touchline" class="speed">
- <p class="timeline">
- <p class="circle">
- </p>
- </p>
- </p>
- <p class="num">
- <span class="currentTime">
- 00:00
- </span>
- <span class="timeAll">
- 00:00
- </span>
- </p>
- </p>
- </p>
- <p class="content">
- <p>
- 但是因为滤镜的兼容性问题,最好是不要用,你可以用ps做图的时候,把背景调一下透明度后导成png格式的图片就行了
- </p>
- <p>
- 如果透明的背景颜色一样的话,那么你可以切成1px*1px大小的png图片平铺,gif只支持透明度100%也就是完全透明的图片
- </p>
- <p>
- 半透明的不支持,而png格式的图片则不存在什么问题
- </p>
- <p>
- 唯一会有问题的地方就只是IE6不兼容透明png格式而已,我的百度空间有解决IE6透明的问题
- </p>
- </p>
- <p class="bottom">
- <p class="left">
- <a href="#">
- <span>
- </span>
- 上一章
- </a>
- </p>
- <p class="center">
- <a href="#">
- <i>
- </i>
- 目录
- </a>
- </p>
- <p class="right">
- <a href="#">
- 下一章
- <b>
- </b>
- </a>
- </p>
- </p>
- </body>
- <script type="text/javascript" src="js/jquery.1.9.1.min.js">
- </script>
- <script>
- $(document).ready(function() {
- < !--
- var ProcessNow = 0; -->
- var audio = document.getElementById("audio");
- $("#images").on('click',
- function() {
- if (audio.paused) {
- Play();
- } else {
- Pause();
- }
- }) var isTouch = false;
- var lineStart = $("#touchline").offset().left;
- var lineWidth = $("#touchline").width();
- //监听音频播放完毕事件
- audio.addEventListener('ended',
- function() {
- document.getElementById("images").src = "images/static.png";
- $(".circle").css("width", 0);
- $(".currentTime").html('00:00');
- },
- false);
- function Play() {
- audio.play();
- document.getElementById("images").src = "images/voice.gif";
- TimeSpan();
- } //Play()
- function Pause() {
- audio.pause();
- document.getElementById("images").src = "images/static.png";
- } //Pause()
- function TimeSpan() {
- setInterval(function() { < !--
- if (!isTouch) {--><!--currentTime = audio.currentTime; --><!--timeAll = audio.duration; --><!--isTouch = false; --><!--
- }-->
- var currentTime = audio.currentTime;
- var timeAll = audio.duration; < !--currentTime = audio.currentTime; --><!--timeAll = audio.duration; -->
- var ProcessNow = (currentTime / timeAll) * 400;
- $(".circle").css("width", ProcessNow);
- var currentTimeFm = timeFormat(audio.currentTime);
- var timeAllFm = timeFormat(TimeAll());
- //触发条件停止循环,然后将时间和进度条初始化
- if (currentTime >= timeAll) {
- $(".circle").css("width", 0);
- $(".currentTime").html('00:00');
- clearInterval(interval);
- }
- $(".currentTime").html(currentTimeFm);
- $(".timeAll").html(timeAllFm);
- },
- 1000);
- } //TimeSpan()
- 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;
- } //timeFormat()
- function TimeAll() {
- return audio.duration;
- } //TimeAll()
- //手势监听事件touchline
- 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); < !--alert(x); --><!--alert(lineStart); -->
- if (x < lineStart) {
- x = lineStart;
- }
- var scale = (x - lineStart) / lineWidth;
- audio.currentTime = scale * audio.duration;
- },
- false);
- < !--touchline.addEventListener("touchmove",
- function(evt) {--><!--evt.preventDefault(); --><!--
- var touch = evt.touches[0]; --><!--end_x = parseInt(touch.pageX),
- --><!--end_y = parseInt(touch.pageY); --><!--xy.innerHTML = end_x + "," + end_y; --><!--
- },
- false)--><!--touchline.addEventListener("touchend",
- function(evt) {--><!--
- var x_x = end_x - x; --><!--
- var y_y = end_y - y; --><!--endxy.innerHTML = x_x + "," + y_y; --><!--document.title = "x轴移动了" + x_x + " ,y轴移动了" + y_y; --><!--
- if (y_y < -50) {--><!--content.innerHTML = "由于你向上滑动了一段距离,所以我要插入内容了"; --><!--
- } else {--><!--content.innerHTML = ""; --><!--
- }--><!--
- },
- false)-->
- })
- </script>
- </html>
这个语音播放有点缺陷,进入页面时,语音并没有被加载,需要点击播放后才加载,不过也比较符合用户,节省流量。还有就是因为语音条比较小,触动事件的那个p比较小,触动滑动时,不会很灵敏。
来源: https://www.2cto.com/kf/201710/689703.html