HTML5<audio>标签--音频播放全解析
来源:互联网 发布:js遍历文件夹 编辑:程序博客网 时间:2024/05/16 08:42
HTML5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在Html5还没确定之前,如果想要在听音乐看视频唯一的办法就是用flash
意思是当你没有给浏览器装载Flash插件的话 那么音乐视频即是空谈,html5 audio的出现改变了这一格局,因为你可以不用Flash插件就可以听音乐看视频,当然这些能否实现
还跟你用的浏览器有关。
这是demo地址 http://www.feman.cn/h5/audio.html
在手机上浏览效果会更好
文章结构
1.audio的概念以及属性和方法
2.audio的一些事件
3.写一个完整的音频播放页面
详
1.html5 audio的语法以及属性和方法
使用语法
<audio src=”song.mp3” controls=”controls” loop=”loop” autoplay=”autoplay”>亲 您的浏览器不支持html5的audio标签</audio>
属性
src 是歌曲的路径
controls 播放控制 如果给标签里写了 controls=”controls” 那么网页会显示audio自带的播放控件,如果没写就不会显示.
loop 歌曲循环 在标签里添加该属性歌曲循环 如果你的歌曲是从后台调取的的 也可以在ajax里设置 loop=true/false来控制;
autoplay 当歌曲加载后自动播放,但是只有pc端可以实现 移动端不行(pc端的浏览器要比移动端的完善很多,对有些属性支持也会好很多)
以上是标签内的属性 当然也可以作为对象属性来调取控制auido.*
audio不单单是个标签 他也是window下的一个对象,对象就有属性和方法,作为对象他有哪些常用的方法呢
对象属性:
currentTime 获取当前播放时间
duration 获取歌曲的总时间
play 是否在播放 返回true/false
pause 是否暂停 返回true/false
对象方法:
play() 播放歌曲
pause() 暂停歌曲
load()重新加载歌曲
以上这些属性和方法只是audio最常用的一部分,也是今天的demo里面要用到的,如果想了解更多关于audio的属性和方法可以去w3shool看下 http://www.w3school.com.cn/jsref/dom_obj_audio.asp
2.html5 audio的一些事件
play 播放事件 可判断歌曲是否正在播放中
pause 暂停事件 判断歌曲是否暂停
loadstart,durationchange,loadeddata,progress,canplay,canplaythrough。(这些事件在加载过程中是按以上顺序触发的)
以上这些事件可以通过事件监听对其做相应处理
3.完整的音频播放页面
- <!doctype html>
- <html lang=”en”>
- <head>
- <meta charset=”UTF-8”>
- <meta name=”viewport” content=“width=device-width,initial-scale=1 user-scalable=0”/>
- <link rel=”shortcut icon” href=“img/logo.png”>
- <title>html5 audio音频播放</title>
- <style>
- *{ margin: 0; padding:0;}
- body{-webkit-tap-highlight-color: rgba(0,0,0,0); font-family: ”微软雅黑”}
- h1{ width: 100%; font-size: 1.5em; text-align: center; line-height: 3em; color:#47c9af; }
- #audio{ width: 100%;}
- #control{ width: 150px; height: 150px; line-height: 150px; text-align: center; border-radius: 200px; border:none; color:#fff; margin-top: -75px; margin-left:-75px; left:50%; top:50%; position: absolute; box-shadow: #888 0 0 8px;}
- .color_gray{ background: #e4e4e4}
- .hide{ display: none;}
- .show{ display: block;}
- .play{ background: #f06060;}
- .pause{ background:skyblue}
- /*进度条样式*/
- .progressBar{ width: 100%; height: 10px;margin: 30px auto 30px auto; position:absolute; left: 0; bottom: 35px;}
- .progressBar div{ position: absolute;}
- .progressBar .progressBac{ width: 100%; height: 10px; left: 0; top:0; background: #e4e4e4;}
- .progressBar .speed{width: 100%; height: 10px; left: -100%; background: #f06060; }
- .progressBar .drag{ width: 30px; height: 30px; left: 0; top:-10px; background: skyblue; opacity: 0.8; border-radius: 50px; box-shadow: #fff 0 0 5px;}
- /*时间样式*/
- #time{ width: 100%; height: 20px;position: absolute; left: 0; bottom:30px; color:#888;}
- .tiemDetail{ position: absolute; right:10px; top:0;}
- #songInfo{overflow: hidden; width: 200px; height:50px; line-height: 50px; text-align: center; color:#34495e; margin-top: -25px; margin-left:-100px; left:50%; top:70%; position: absolute;}
- .shareImg{ position: absolute; left: 100000px;}
- </style>
- </head>
- <body>
- <script>
- (<span class="keyword">function</span><span>() { </span></span></li><li class=""><span> getSong(); </span></li><li class="alt"><span>}) </span></li><li class=""><span> </span></li><li class="alt"><span><span class="comment">//获取歌曲链接并插入dom中</span><span> </span></span></li><li class=""><span><span class="keyword">function</span><span> getSong() { </span></span></li><li class="alt"><span> <span class="keyword">var</span><span> audio = document.getElementById(</span><span class="string">"audio"</span><span>); </span></span></li><li class=""><span> audio.src = <span class="string">"http://frontman.qiniudn.com/songnotime.mp3"</span><span>; </span></span></li><li class="alt"><span> audio.loop = <span class="keyword">true</span><span>; </span><span class="comment">//歌曲循环</span><span> </span></span></li><li class=""><span> playCotrol(); <span class="comment">//播放控制函数</span><span> </span></span></li><li class="alt"><span> </span></li><li class=""><span>} </span></li><li class="alt"><span> </span></li><li class=""><span><span class="comment">//点击播放/暂停</span><span> </span></span></li><li class="alt"><span><span class="keyword">function</span><span> clicks() { </span></span></li><li class=""><span> <span class="keyword">var</span><span> audio = document.getElementById(</span><span class="string">"audio"</span><span>); </span></span></li><li class="alt"><span> (<span class="string">"#control"</span><span>).click(</span><span class="keyword">function</span><span>() { </span></span></li><li class=""><span> <span class="keyword">if</span><span> ((</span><span class="string">"#control"</span><span>).hasClass(</span><span class="string">"play"</span><span>)) { </span></span></li><li class="alt"><span> (<span class="string">"#control"</span><span>).addClass(</span><span class="string">"pause"</span><span>).removeClass(</span><span class="string">"play"</span><span>); </span></span></li><li class=""><span> audio.play();<span class="comment">//开始播放</span><span> </span></span></li><li class="alt"><span> dragMove();<span class="comment">//并且滚动条开始滑动</span><span> </span></span></li><li class=""><span> (<span class="string">"#control"</span><span>).html(</span><span class="string">"暂停播放"</span><span>); </span></span></li><li class="alt"><span> } <span class="keyword">else</span><span> { </span></span></li><li class=""><span> (<span class="string">"#control"</span><span>).addClass(</span><span class="string">"play"</span><span>).removeClass(</span><span class="string">"pause"</span><span>); </span></span></li><li class="alt"><span> (<span class="string">"#control"</span><span>).html(</span><span class="string">"点击播放"</span><span>); </span></span></li><li class=""><span> audio.pause(); </span></li><li class="alt"><span> } </span></li><li class=""><span> }) </span></li><li class="alt"><span>} </span></li><li class=""><span> </span></li><li class="alt"><span><span class="comment">//播放时间</span><span> </span></span></li><li class=""><span><span class="keyword">function</span><span> timeChange(time, timePlace) {</span><span class="comment">//默认获取的时间是时间戳改成我们常见的时间格式</span><span> </span></span></li><li class="alt"><span> <span class="keyword">var</span><span> timePlace = document.getElementById(timePlace); </span></span></li><li class=""><span> <span class="comment">//分钟</span><span> </span></span></li><li class="alt"><span> <span class="keyword">var</span><span> minute = time / 60; </span></span></li><li class=""><span> <span class="keyword">var</span><span> minutes = parseInt(minute); </span></span></li><li class="alt"><span> <span class="keyword">if</span><span> (minutes < 10) { </span></span></li><li class=""><span> minutes = <span class="string">"0"</span><span> + minutes; </span></span></li><li class="alt"><span> } </span></li><li class=""><span> <span class="comment">//秒</span><span> </span></span></li><li class="alt"><span> <span class="keyword">var</span><span> second = time % 60; </span></span></li><li class=""><span> seconds = parseInt(second); </span></li><li class="alt"><span> <span class="keyword">if</span><span> (seconds < 10) { </span></span></li><li class=""><span> seconds = <span class="string">"0"</span><span> + seconds; </span></span></li><li class="alt"><span> } </span></li><li class=""><span> <span class="keyword">var</span><span> allTime = </span><span class="string">""</span><span> + minutes + </span><span class="string">""</span><span> + </span><span class="string">":"</span><span> + </span><span class="string">""</span><span> + seconds + </span><span class="string">""</span><span> </span></span></li><li class="alt"><span> timePlace.innerHTML = allTime; </span></li><li class=""><span>} </span></li><li class="alt"><span> </span></li><li class=""><span><span class="comment">//播放事件监听</span><span> </span></span></li><li class="alt"><span><span class="keyword">function</span><span> playCotrol() { </span></span></li><li class=""><span> audio.addEventListener(<span class="string">"loadeddata"</span><span>, </span><span class="comment">//歌曲一经完整的加载完毕( 也可以写成上面提到的那些事件类型)</span><span> </span></span></li><li class="alt"><span> <span class="keyword">function</span><span>() { </span></span></li><li class=""><span> (<span class="string">"#control"</span><span>).addClass(</span><span class="string">"play"</span><span>).removeClass(</span><span class="string">"color_gray"</span><span>); </span></span></li><li class="alt"><span> (<span class="string">"#control"</span><span>).html(</span><span class="string">"点击播放"</span><span>); </span></span></li><li class=""><span> addListenTouch(); <span class="comment">//歌曲加载之后才可以拖动进度条</span><span> </span></span></li><li class="alt"><span> <span class="keyword">var</span><span> allTime = audio.duration; </span></span></li><li class=""><span> timeChange(allTime, <span class="string">"allTime"</span><span>); </span></span></li><li class="alt"><span> setInterval(<span class="keyword">function</span><span>() { </span></span></li><li class=""><span> <span class="keyword">var</span><span> currentTime = audio.currentTime; </span></span></li><li class="alt"><span> (<span class="string">"#time .currentTime"</span><span>).html(timeChange(currentTime, </span><span class="string">"currentTime"</span><span>)); </span></span></li><li class=""><span> }, 1000); </span></li><li class="alt"><span> clicks(); </span></li><li class=""><span> }, <span class="keyword">false</span><span>); </span></span></li><li class="alt"><span> </span></li><li class=""><span> audio.addEventListener(<span class="string">"pause"</span><span>, </span></span></li><li class="alt"><span> <span class="keyword">function</span><span>() { </span><span class="comment">//监听暂停</span><span> </span></span></li><li class=""><span> (<span class="string">"#control"</span><span>).addClass(</span><span class="string">"play"</span><span>).removeClass(</span><span class="string">"pause"</span><span>); </span></span></li><li class="alt"><span> (<span class="string">"#control"</span><span>).html(</span><span class="string">"点击播放"</span><span>); </span></span></li><li class=""><span> <span class="keyword">if</span><span> (audio.currentTime == audio.duration) { </span></span></li><li class="alt"><span> audio.stop(); </span></li><li class=""><span> audio.currentTime = 0; </span></li><li class="alt"><span> } </span></li><li class=""><span> }, <span class="keyword">false</span><span>); </span></span></li><li class="alt"><span> audio.addEventListener(<span class="string">"play"</span><span>, </span></span></li><li class=""><span> <span class="keyword">function</span><span>() { </span><span class="comment">//监听暂停</span><span> </span></span></li><li class="alt"><span> (<span class="string">"#control"</span><span>).addClass(</span><span class="string">"pause"</span><span>).removeClass(</span><span class="string">"play"</span><span>); </span></span></li><li class=""><span> (”#control”).html(“暂停播放”);
- dragMove();
- }, false);
- audio.addEventListener(”ended”, function() {
- alert(0)
- }, false)
- }
- //进度条
- 这里我用的是事件实现进度拖动 如果不太熟悉touch的可以看下我之前写的一个小demo http://www.cnblogs.com/leinov/p/3701951.html
- var startX, x, aboveX = 0; //触摸时的坐标 //滑动的距离 //设一个全局变量记录上一次内部块滑动的位置
- //1拖动监听touch事件
- function addListenTouch() {
- document.getElementById(”drag”).addEventListener(“touchstart”, touchStart, false);
- document.getElementById(”drag”).addEventListener(“touchmove”, touchMove, false);
- document.getElementById(”drag”).addEventListener(“touchend”, touchEnd, false);
- var drag = document.getElementById(“drag”);
- var speed = document.getElementById(“speed”);
- }
- //touchstart,touchmove,touchend事件函数
- function touchStart(e) {
- e.preventDefault();
- var touch = e.touches[0];
- startX = touch.pageX;
- }
- function touchMove(e) { //滑动
- e.preventDefault();
- var touch = e.touches[0];
- x = touch.pageX - startX; //滑动的距离
- //drag.style.webkitTransform = ‘translate(‘ + 0+ ‘px, ’ + y + ‘px)’; //也可以用css3的方式
- drag.style.left = aboveX + x + ”px”; //
- speed.style.left = -((window.innerWidth) - (aboveX + x)) + ”px”;
- }
- function touchEnd(e) { //手指离开屏幕
- e.preventDefault();
- aboveX = parseInt(drag.style.left);
- var touch = e.touches[0];
- var dragPaddingLeft = drag.style.left;
- var change = dragPaddingLeft.replace(“px”, “”);
- numDragpaddingLeft = parseInt(change);
- var currentTime = (numDragpaddingLeft / (window.innerWidth - 30)) * audio.duration;//30是拖动圆圈的长度,减掉是为了让歌曲结束的时候不会跑到window以外
- audio.currentTime = currentTime;
- }
- //3拖动的滑动条前进
- function dragMove() {
- setInterval(function() {
- drag.style.left = (audio.currentTime / audio.duration) * (window.innerWidth - 30) + ”px”;
- speed.style.left = -((window.innerWidth) - (audio.currentTime / audio.duration) * (window.innerWidth - 30)) + ”px”;
- }, 500);
- }
- </script>
- <h1>html5 audio 音频播放demo</h1>
- <!–audiostart–>
- <audio id=”audio” src=“” loop=“loop” autoplay=“autoplay” ></audio>
- <!–audio End–>
- <!–播放控制按钮start–>
- <button id=”control” class=“”>loading</button>
- <!–播放控制按钮end–>
- <!–时间进度条块儿start–>
- <section class=“progressBar”>
- <div class=“progressBac”></div>
- <div class=“speed” id=“speed”></div>
- <div class=“drag” id=“drag”></div>
- </section>
- <!–时间进度条块儿end–>
- <!–播放时间start–>
- <div id=”time”><div class=“tiemDetail”><span class=“currentTime” id=“currentTime”>00:00</span>/<span class=“allTime” id=“allTime”>00:00</span></div></div>
- <!–播放时间end–>
- <!–歌曲信息start–>
- <div id=”songInfo”>没时间-Leinov<div class=“shareImg”><img src=“img/html5audio.jpg” alt=“”></div></div>
- <!–歌曲信息end–>
- <script src=”js/zepto.js”></script>
- </body>
- </html>
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/> <link rel="shortcut icon" href="img/logo.png"> <title>html5 audio音频播放</title> <style> *{ margin: 0; padding:0;} body{-webkit-tap-highlight-color: rgba(0,0,0,0); font-family: "微软雅黑"} h1{ width: 100%; font-size: 1.5em; text-align: center; line-height: 3em; color:#47c9af; } #audio{ width: 100%;} #control{ width: 150px; height: 150px; line-height: 150px; text-align: center; border-radius: 200px; border:none; color:#fff; margin-top: -75px; margin-left:-75px; left:50%; top:50%; position: absolute; box-shadow: #888 0 0 8px;} .color_gray{ background: #e4e4e4} .hide{ display: none;} .show{ display: block;} .play{ background: #f06060;} .pause{ background:skyblue} /*进度条样式*/ .progressBar{ width: 100%; height: 10px;margin: 30px auto 30px auto; position:absolute; left: 0; bottom: 35px;} .progressBar div{ position: absolute;} .progressBar .progressBac{ width: 100%; height: 10px; left: 0; top:0; background: #e4e4e4;} .progressBar .speed{width: 100%; height: 10px; left: -100%; background: #f06060; } .progressBar .drag{ width: 30px; height: 30px; left: 0; top:-10px; background: skyblue; opacity: 0.8; border-radius: 50px; box-shadow: #fff 0 0 5px;} /*时间样式*/ #time{ width: 100%; height: 20px;position: absolute; left: 0; bottom:30px; color:#888;} .tiemDetail{ position: absolute; right:10px; top:0;} #songInfo{overflow: hidden; width: 200px; height:50px; line-height: 50px; text-align: center; color:#34495e; margin-top: -25px; margin-left:-100px; left:50%; top:70%; position: absolute;} .shareImg{ position: absolute; left: 100000px;} </style></head><body> <script>$(function() { getSong();})//获取歌曲链接并插入dom中function getSong() { var audio = document.getElementById("audio"); audio.src = "http://frontman.qiniudn.com/songnotime.mp3"; audio.loop = true; //歌曲循环 playCotrol(); //播放控制函数}//点击播放/暂停function clicks() { var audio = document.getElementById("audio"); $("#control").click(function() { if ($("#control").hasClass("play")) { $("#control").addClass("pause").removeClass("play"); audio.play();//开始播放 dragMove();//并且滚动条开始滑动 $("#control").html("暂停播放"); } else { $("#control").addClass("play").removeClass("pause"); $("#control").html("点击播放"); audio.pause(); } })}//播放时间function timeChange(time, timePlace) {//默认获取的时间是时间戳改成我们常见的时间格式 var timePlace = document.getElementById(timePlace); //分钟 var minute = time / 60; var minutes = parseInt(minute); if (minutes < 10) { minutes = "0" + minutes; } //秒 var second = time % 60; seconds = parseInt(second); if (seconds < 10) { seconds = "0" + seconds; } var allTime = "" + minutes + "" + ":" + "" + seconds + "" timePlace.innerHTML = allTime;}//播放事件监听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)}//进度条这里我用的是事件实现进度拖动 如果不太熟悉touch的可以看下我之前写的一个小demo http://www.cnblogs.com/leinov/p/3701951.html var startX, x, aboveX = 0; //触摸时的坐标 //滑动的距离 //设一个全局变量记录上一次内部块滑动的位置 //1拖动监听touch事件function addListenTouch() { document.getElementById("drag").addEventListener("touchstart", touchStart, false); document.getElementById("drag").addEventListener("touchmove", touchMove, false); document.getElementById("drag").addEventListener("touchend", touchEnd, false); var drag = document.getElementById("drag"); var speed = document.getElementById("speed");}//touchstart,touchmove,touchend事件函数 function touchStart(e) { e.preventDefault(); var touch = e.touches[0]; startX = touch.pageX; } function touchMove(e) { //滑动 e.preventDefault(); var touch = e.touches[0]; x = touch.pageX - startX; //滑动的距离 //drag.style.webkitTransform = 'translate(' + 0+ 'px, ' + y + 'px)'; //也可以用css3的方式 drag.style.left = aboveX + x + "px"; // speed.style.left = -((window.innerWidth) - (aboveX + x)) + "px"; } function touchEnd(e) { //手指离开屏幕 e.preventDefault(); aboveX = parseInt(drag.style.left); var touch = e.touches[0]; var dragPaddingLeft = drag.style.left; var change = dragPaddingLeft.replace("px", ""); numDragpaddingLeft = parseInt(change); var currentTime = (numDragpaddingLeft / (window.innerWidth - 30)) * audio.duration;//30是拖动圆圈的长度,减掉是为了让歌曲结束的时候不会跑到window以外 audio.currentTime = currentTime; }//3拖动的滑动条前进function dragMove() { setInterval(function() { drag.style.left = (audio.currentTime / audio.duration) * (window.innerWidth - 30) + "px"; speed.style.left = -((window.innerWidth) - (audio.currentTime / audio.duration) * (window.innerWidth - 30)) + "px"; }, 500);}</script><h1>html5 audio 音频播放demo</h1><!--audiostart--><audio id="audio" src="" loop="loop" autoplay="autoplay" ></audio><!--audio End--><!--播放控制按钮start--><button id="control" class="">loading</button><!--播放控制按钮end--><!--时间进度条块儿start--><section class="progressBar"> <div class="progressBac"></div> <div class="speed" id="speed"></div> <div class="drag" id="drag"></div></section><!--时间进度条块儿end--><!--播放时间start--><div id="time"><div class="tiemDetail"><span class="currentTime" id="currentTime">00:00</span>/<span class="allTime" id="allTime">00:00</span></div></div><!--播放时间end--><!--歌曲信息start--><div id="songInfo">没时间-Leinov<div class="shareImg"><img src="img/html5audio.jpg" alt=""></div></div><!--歌曲信息end--><script src="js/zepto.js"></script></body></html>
【转载来源】
- HTML5<audio>标签--音频播放全解析
- html5 audio音频播放全解析
- html5 audio音频播放全解析
- html5 之 Audio标签 播放音频
- 使用HTML5的Audio标签打造WEB音频播放器
- HTML5 - 使用<audio>播放音频
- HTML5 audio 播放器标签
- HTML5 音频播放 <audio> 视频<video>
- HTML5中使用audio元素播放音频
- HTML5用audio标签做一个最简单的音频播放器
- 微信端音频audio标签自动播放
- HTML5之音频Audio标签的应用
- HTML5-音频audio和视频video标签
- HTML5教程之音频Audio标签应用
- HTML5基础教程:audio音频标签的详解
- html5 音乐播放器 audio 标签用法
- HTML5 IE9+ audio标签播放声音
- Html5 audio标签实现音乐播放
- windows桌面双击可执行java脚本
- SHELL/VIM删除重复行(去重)
- 一点就通:学会dpkg 命令管理 Debian 系的 Linux系统
- 阿里云服务器ECS centos7.2搭建nginx环境以及负载均衡
- 策划
- HTML5<audio>标签--音频播放全解析
- node + express 中ejs页面中文乱码问题
- Android Studio多渠道打包
- 多个DataTable表合并(相同结构与不同结构)
- C++递归:
- 查询数据库当前连接数(session),进程数等操作
- CSDN论坛刷阅读次数的方法
- 注册页面 , 验证码倒计时代码的实现
- 查看oracle用户数据库连接数