html5 audio音频播放全解析

序

html5开启了一个新时代，因为它让浏览器本身变得不那么被动，audio api就是一个典型的列子，在html5还没确定之前，如果想要在网页上听音乐看视频唯一的办法就是用flash
意思是当你没有给浏览器装载Flash插件的话那么音乐视频即是空谈，html5 audio的出现改变了这一格局，因为你可以不用Flash插件就可以听音乐看视频，当然这些能否实现
还跟你用的浏览器有关。

这是demo地址 http://www.feman.cn/h5/audio.html（IE8以下不支持）

在手机上浏览效果会更好

文章结构

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.完整的html5 audio音频播放页面

<!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>

<script src="js/zepto.js"></script>

</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-->

</body>

</html>

好了一个完整的html5 audio播放器完成啦！

html5 audio音频播放全解析的更多相关文章

HTML5: HTML5 Audio(音频)
ylbtech-HTML5: HTML5 Audio(音频) 1.返回顶部 1. HTML5 Audio(音频) HTML5 提供了播放音频文件的标准. 互联网上的音频直到现在,仍然不存在一项旨在网 ...
[小程序开发] 微信小程序audio音频播放组件+api_wx.createAudioContext
引言: audio是微信小程序中的音频组件,可以轻松实现小程序中播放/停止音频等自定义动作. 附上微信小程序audio组件的相关属性说明:https://mp.weixin.qq.com/debug/ ...
HTML5的音频播放和视频播放
1.音频播放 audio(音频) html5提供了播放音频文件的标准 <audio src="anli.mp3" controls="controls" ...
HTML5实现音频播放
Web 上的音频直到现在,仍然不存在一项旨在网页上播放音频的标准. 今天,大多数音频是通过插件(比如 Flash)来播放的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 aud ...
微信小程序之----audio音频播放
audio audio为音频组件,我们可以轻松的在小程序中播放音频. audio组件属性如下: 属性名类型默认值说明 id String video 组件的唯一标识符, src String ...
HTML5 Audio(音频)
<audio controls> <source src="horse.ogg" type="audio/ogg"> <s ...
js获取html5 audio 音频时长方法
<audio src="我的好兄弟.mp3" controls="controls" id="audio" style=" ...
用html5实现音频播放器
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
css总结16:HTML5 多媒体音频(Audio)视频(video )
1 显示嵌入网页中的 MP3 文件: <embed height="50" width="100" src="horse.mp3"&g ...

随机推荐

Leetcode#138 Copy List with Random Pointer
原题地址非常巧妙的方法,不需要用map,只需要O(1)的额外存储空间,分为3步: 1. 先复制链表,但是这个复制比较特殊,每个新复制的节点添加在原节点的后面,相当于"加塞"2. ...
Least Common Ancestors 分类： ACM TYPE 2014-10-19 11:24 84人阅读评论(0) 收藏
#include <iostream> #include <cstdio> #include <cstring> #include <cmath> #i ...
C51关键字
C51 中的关键字关键字用途说明 auto 存储种类说明用以说明局部变量,缺省值为此 break 程序语句退出最内层循环 case 程序语句 Switch语句中的选择项 char 数据类型说 ...
PHP命令行模式基本介绍
首先要保证php在cli模式下可用,php –v会返回PHP的版本号. [gaojian3@log001 ~]$ php -v PHP (cli) (built: Aug ::) Copyrigh ...
CSS3：线上编辑工具及实用资料整理
an I Use 个人最常用的,资料比较全,桌面和移动浏览器支持HTML5,CSS3,SVG和兼容性表. 官网地址:http://caniuse.com/ CSS3 Click Chart CSS3 ...
使用ajax技术无刷新动态调用股票信息
新浪的财金频道一直感觉做得很好.但由于最近网速慢的缘故,查看股票信息时网页老是打不开.这几天一直在研究ajax,于是用jquery自己做了一个自动读取新浪股票实时数据的页面. <html> ...
ASP.NET Excel 导入 Oracle 方法2
先谈思路:前半部分和之前那篇日志的内容是一样的,把Excel数据导入到DataSet中,不同之处在于数据插入的方式: 本方法是拼接 INSERT INTO TABLE VALUES() 字符串,对,就 ...
HTTP协议中的5类状态码
① 客户方错误 100 继续 101 交换协议 ② 成功 200 OK 201 已创建 202 接收 ...
最常用的javascript方法函数
字符串长度截取 function cutstr(str, len) { var temp, icount = 0, patrn = /[^\x00-\xff]/, strre = "&quo ...
数据库中已存在名为 'View_Business' 的对象。
用EF框架+MCF,编译的时候出现:数据库中已存在名为 'View_Business' 的对象. 解决方案: 1.Enable-Migrations2.Add-Migration3.Update-Da ...

html5 audio音频播放全解析

html5 audio音频播放全解析的更多相关文章

随机推荐

热门专题