根据html5实现的简单的音频播放，还是挺好的，可以借鉴，下面上代码了
<!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 p{ 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">
<p class="progressbac"></p>
<p class="speed" id="speed"></p>
<p class="drag" id="drag"></p>
</section>
<!--时间进度条块儿end-->
<!--播放时间start-->
<p id="time"><p class="tiemdetail"><span class="currenttime" id="currenttime">00:00</span>/<span class="alltime" id="alltime">00:00</span></p></p>
<!--播放时间end-->
<!--歌曲信息start-->
<p id="songinfo">没时间-leinov<p class="shareimg"><img src="img/html5audio.jpg" alt=""></p></p>
<!--歌曲信息end-->
<script src="js/zepto.js"></script>
</body>
</html>
2. [图片] audioplay.png
以上就是html5 音频播放图文实例的详细内容。