顺序
HTML5开启了一个新的时代，因为它让浏览器本身不再那么被动，audioapi就是一个典型的例子，在HTML5没有确认之前，如果你想听音乐、看视频，唯一的办法就是使用flash
这意味着如果浏览器不加载Flash插件html5 无法播放，那么音乐视频只是一句空话。 html5audio的出现改变了这种格局，因为不需要Flash插件就可以听音乐、看视频。 其实这个是可以实现的
它还取决于您使用的浏览器。
这是演示地址
在手机上浏览疗效会更好
文章结构
一、音频的概念及其属性和技巧
2. 音频有些混乱
3.编写完整的音频播放页面
详细的
1、html5audio的句型、属性和技巧
使用句型
您的浏览器不支持html5的audio标签
属性
src是歌曲的路径
如果在播放控件的标签中写入controls="controls"，网页就会显示自带的音频播放控件。 如果不写的话就不会显示。
循环歌曲loop 在标签中添加这个属性歌曲循环如果你的歌曲是从后台读取的，也可以在ajax中设置loop=true/false来控制；
autoplay是歌曲加载后手动播放，只有pc端可以实现，联通端不能（pc端的浏览器比联通端的建立好很多，对某些属性的支持会好很多）更好的）
以上是标签中的属性。 事实上，它们也可以作为对象属性来访问和控制auido。*
音频不仅仅是一个标签，它也是窗口下的一个对象，并且该对象有属性和方法。 作为一个对象，它有哪些常用的方法呢？
对象属性：
currentTime 获取当前播放时间
获取歌曲的总时长
play是否正在播放返回true/false
暂停是否返回true/false
对象模式：
play() 播放歌曲
暂停（）暂停歌曲
load() 重新加载歌曲
上面的属性和方法只是音频最常用的部分html5 无法播放，明天的demo中会用到它们。 如果你想了解更多关于audio的属性和方法，可以去w3shool。
2、html5audio的一些风波
play播放可以判断歌曲是否正在播放
判断歌曲是否暂停
loadstart、durationchange、loadeddata、进度、canplay、canplaythrough。 （这种风暴是在加载过程中按上述顺序触发的）
上述风暴可以通过风暴窃听进行相应处理
3.完整的音频播放页面
html5 audio音频播放 *{ 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;} $(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); }html5 audio 音频播放demo
从：
