html5比html4的音频使用方法,HTML5audio标签的用法示例

建站1770 更新时间：2025-06-07 23:19:08

2023年6月20日发(作者：)

html5⽐html4的⾳频使⽤⽅法,HTML5audio标签的⽤法⽰例您的位置：⾸页 - 教程 - HTML5 - 正⽂HTML5 audio标签的⽤法⽰例标签定义声⾳，⽐如⾳乐或其他⾳频流。html5 audio可以不⽤Flash插件就可以听⾳乐看视频，并不是全部的浏览器都⽀持此标签。audio不⽀持style调整，要想有⼀个漂亮的播放器，只能⽤JS控制的语法以及属性和⽅法您的浏览器不⽀持html5的audio标签controls="controls"如果出现该属性，则向⽤户显⽰控件，⽐如播放按钮。loop="loop"播放次数，如果出现该属性，则每当⾳频结束时重新开始播放。autoplay="autoplay"如果出现该属性，则⾳频在就绪后马上播放。preload="preload"如果出现该属性，则⾳频在页⾯加载时进⾏加载，并预备播放。如果使⽤ "autoplay"，则忽略该属性。audio不单单是个标签他也是window下的⼀个对象，对象就有属性和⽅法对象属性：currentTime 获取当前播放时间duration 获取歌曲的总时间play 是否在播放返回true/falsepause 是否暂停返回true/false对象⽅法：play() 播放歌曲pause() 暂停歌曲load()重新加载歌曲的⼀些事件play 播放事件可判断歌曲是否正在播放中pause 暂停事件判断歌曲是否暂停loadstart，durationchange，loadeddata，progress，canplay，canplaythrough。(这些事件在加载过程中是按以上顺序触发的)以上这些事件可以通过事件监听对其做相应处理3.完整的html5 audio⾳频播放页⾯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 = mentById("audio"); = "/3"; = true; //歌曲循环playCotrol(); //播放控制函数}//点击播放/暂停function clicks() {var audio = mentById("audio");$("#control").click(function() {if ($("#control").hasClass("play")) {$("#control").addClass("pause").removeClass("play");();//开始播放dragMove();//并且滚动条开始滑动$("#control").html("暂停播放");} else {$("#control").addClass("play").removeClass("pause");$("#control").html("点击播放");();}})}//播放时间function timeChange(time, timePlace) {//默认获取的时间是时间戳改成我们常见的时间格式var timePlace = mentById(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 + ""TML = allTime;}//播放事件监听function playCotrol() {ntListener("loadeddata", //歌曲⼀经完整的加载完毕( 也可以写成上⾯提到的那些事件类型)function() {$("#control").addClass("play").removeClass("color_gray");$("#control").html("点击播放");addListenTouch(); //歌曲加载之后才可以拖动进度条var allTime = on;timeChange(allTime, "allTime");setInterval(function() {var currentTime = tTime;$("#time .currentTime").html(timeChange(currentTime, "currentTime"));}, 1000);clicks();}, false);ntListener("pause",function() { //监听暂停$("#control").addClass("play").removeClass("pause");$("#control").html("点击播放");if (tTime == on) {();tTime = 0;}}, false);ntListener("play",function() { //监听暂停$("#control").addClass("pause").removeClass("play");$("#control").html("暂停播放");dragMove();}, false);ntListener("ended", function() {alert(0)}, false)}//进度条var startX, x, aboveX = 0; //触摸时的坐标 //滑动的距离 //设⼀个全局变量记录上⼀次内部块滑动的位置//1拖动监听touch事件function addListenTouch() {mentById("drag").addEventListener("touchstart", touchStart, false);mentById("drag").addEventListener("touchmove", touchMove, false);mentById("drag").addEventListener("touchend", touchEnd, false);var drag = mentById("drag");var speed = mentById("speed");}//touchstart,touchmove,touchend事件函数function touchStart(e) {tDefault();var touch = s[0];startX = ;}function touchMove(e) { //滑动tDefault();var touch = s[0];x = - startX; //滑动的距离//Transform = 'translate(' + 0+ 'px, ' + y + 'px)'; //也可以⽤css3的⽅式 = aboveX + x + "px"; // = -((idth) - (aboveX + x)) + "px";}function touchEnd(e) { //⼿指离开屏幕tDefault();aboveX = parseInt();var touch = s[0];var dragPaddingLeft = ;var change = e("px", "");numDragpaddingLeft = parseInt(change);var currentTime = (numDragpaddingLeft / (idth - 30)) * on;//30是拖动圆圈的长度，减掉是为了让歌曲结束的时候不会跑到window以外tTime = currentTime;}//3拖动的滑动条前进function dragMove() {setInterval(function() { = (tTime / on) * (idth - 30) + "px"; = -((idth) - (tTime / on) * (idth - 30)) + "px";}, 500);}html5 audio ⾳频播放demoloading00:00/ 00:00没时间-Leinov评论：

2023年6月20日发(作者：)

html5⽐html4的⾳频使⽤⽅法,HTML5audio标签的⽤法⽰例您的位置：⾸页 - 教程 - HTML5 - 正⽂HTML5 audio标签的⽤法⽰例标签定义声⾳，⽐如⾳乐或其他⾳频流。html5 audio可以不⽤Flash插件就可以听⾳乐看视频，并不是全部的浏览器都⽀持此标签。audio不⽀持style调整，要想有⼀个漂亮的播放器，只能⽤JS控制的语法以及属性和⽅法您的浏览器不⽀持html5的audio标签controls="controls"如果出现该属性，则向⽤户显⽰控件，⽐如播放按钮。loop="loop"播放次数，如果出现该属性，则每当⾳频结束时重新开始播放。autoplay="autoplay"如果出现该属性，则⾳频在就绪后马上播放。preload="preload"如果出现该属性，则⾳频在页⾯加载时进⾏加载，并预备播放。如果使⽤ "autoplay"，则忽略该属性。audio不单单是个标签他也是window下的⼀个对象，对象就有属性和⽅法对象属性：currentTime 获取当前播放时间duration 获取歌曲的总时间play 是否在播放返回true/falsepause 是否暂停返回true/false对象⽅法：play() 播放歌曲pause() 暂停歌曲load()重新加载歌曲的⼀些事件play 播放事件可判断歌曲是否正在播放中pause 暂停事件判断歌曲是否暂停loadstart，durationchange，loadeddata，progress，canplay，canplaythrough。(这些事件在加载过程中是按以上顺序触发的)以上这些事件可以通过事件监听对其做相应处理3.完整的html5 audio⾳频播放页⾯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 = mentById("audio"); = "/3"; = true; //歌曲循环playCotrol(); //播放控制函数}//点击播放/暂停function clicks() {var audio = mentById("audio");$("#control").click(function() {if ($("#control").hasClass("play")) {$("#control").addClass("pause").removeClass("play");();//开始播放dragMove();//并且滚动条开始滑动$("#control").html("暂停播放");} else {$("#control").addClass("play").removeClass("pause");$("#control").html("点击播放");();}})}//播放时间function timeChange(time, timePlace) {//默认获取的时间是时间戳改成我们常见的时间格式var timePlace = mentById(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 + ""TML = allTime;}//播放事件监听function playCotrol() {ntListener("loadeddata", //歌曲⼀经完整的加载完毕( 也可以写成上⾯提到的那些事件类型)function() {$("#control").addClass("play").removeClass("color_gray");$("#control").html("点击播放");addListenTouch(); //歌曲加载之后才可以拖动进度条var allTime = on;timeChange(allTime, "allTime");setInterval(function() {var currentTime = tTime;$("#time .currentTime").html(timeChange(currentTime, "currentTime"));}, 1000);clicks();}, false);ntListener("pause",function() { //监听暂停$("#control").addClass("play").removeClass("pause");$("#control").html("点击播放");if (tTime == on) {();tTime = 0;}}, false);ntListener("play",function() { //监听暂停$("#control").addClass("pause").removeClass("play");$("#control").html("暂停播放");dragMove();}, false);ntListener("ended", function() {alert(0)}, false)}//进度条var startX, x, aboveX = 0; //触摸时的坐标 //滑动的距离 //设⼀个全局变量记录上⼀次内部块滑动的位置//1拖动监听touch事件function addListenTouch() {mentById("drag").addEventListener("touchstart", touchStart, false);mentById("drag").addEventListener("touchmove", touchMove, false);mentById("drag").addEventListener("touchend", touchEnd, false);var drag = mentById("drag");var speed = mentById("speed");}//touchstart,touchmove,touchend事件函数function touchStart(e) {tDefault();var touch = s[0];startX = ;}function touchMove(e) { //滑动tDefault();var touch = s[0];x = - startX; //滑动的距离//Transform = 'translate(' + 0+ 'px, ' + y + 'px)'; //也可以⽤css3的⽅式 = aboveX + x + "px"; // = -((idth) - (aboveX + x)) + "px";}function touchEnd(e) { //⼿指离开屏幕tDefault();aboveX = parseInt();var touch = s[0];var dragPaddingLeft = ;var change = e("px", "");numDragpaddingLeft = parseInt(change);var currentTime = (numDragpaddingLeft / (idth - 30)) * on;//30是拖动圆圈的长度，减掉是为了让歌曲结束的时候不会跑到window以外tTime = currentTime;}//3拖动的滑动条前进function dragMove() {setInterval(function() { = (tTime / on) * (idth - 30) + "px"; = -((idth) - (tTime / on) * (idth - 30)) + "px";}, 500);}html5 audio ⾳频播放demoloading00:00/ 00:00没时间-Leinov评论：

本文发布于:2023-06-20，感谢您对本站的认可！

本文链接:http://torson.com.cn/news/1687261261a413.html