文档章节

html5 audio音频播放全解析

oO雨的印记Oo
 oO雨的印记Oo
发布于 2017/05/03 11:02
字数 1420
阅读 15
收藏 0

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>
$(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>

© 著作权归作者所有

共有 人打赏支持
oO雨的印记Oo
粉丝 2
博文 74
码字总数 15383
作品 0
济南
高级程序员
私信 提问
10 个基于 Web 的 HTML5 音乐播放器

HTML5 是一种用于创建和呈现的网页内容的语言。这是一个革命性的语言,它拥有一些真正棒的功能和一个新的HTML5规范允许本地音频流的播放。本文向你推荐 10 个最棒的 HTML5 音频播放器,看看你...

红薯
2012/04/02
49.9K
8
分享7个漂亮的HTML5视频音频播放器及源码

网页视频音频播放器大家并不陌生,在IE中我们可以运行ActiveX来嵌入微软的Media Player或者其他的本地播放器,当然可能大部分我们都是使用Flash来制作播放器。在HTML5发展迅速的今天,让我们...

tp_wire
2012/07/11
32.7K
5
微信小程序 Html2Wxml4J 0.95 更新,支持 Video 和 Audio 解析

html2wxml4J是微信小程序前端html渲染组件html2wxml的后台接口Java版 本次更新内容: 【新增】Video视频标签解析 支持html5中Video标签大部分属性 支持自动播放 支持静音播放 【新增】Audio...

山东-小木
08/07
1K
3
克服 iOS HTML5 音频的局限

简介 过去几年,开发人员一直都在制造完善的交互体验,努力使其可以在浏览器中正确运行。这样的站点通常需要使用浏览器插件 (Flash)。随着智能手机和平板电脑的推出,交互体验看似与新的小部...

tommyfok
2014/02/22
0
0
15 免费的 HTML5 的视频和音频播放器

HTML5 audio 已经成为在线显示视频和音频的新标准,支持 Firefox、Safari 和 Chrome 浏览器。本文提供 15 个免费的强大的 HTML5 音频和视频播放器。 Vimeo Blip.tv SublimeVideo JW Player F...

oschina
2012/06/27
5.3K
4

没有更多内容

加载失败,请刷新页面

加载更多

自定义 Maven 的 repositories

有时,应用中需要一些比较新的依赖,而这些依赖并没有正式发布,还是处于milestone或者是snapshot阶段,并不能从中央仓库或者镜像站上下载到。此时,就需要 自定义Maven的<repositories>。 ...

waylau
30分钟前
1
0
徒手写一个es6代码库

mkdir democd demonpm initnpm install -g babelnpm install -g babel-clinpm install --save-dev babel-preset-es2015-node5 在项目目录创建两个文件夹 functional-playground ......

lilugirl
30分钟前
2
0
linux定位应用问题的一些常用命令,特别针对内存和线程分析的dump命令

1.jps找出进程号,找到对应的进程号后面才好继续操作 2.linux查看进程详细信息 ps -ef | grep 进程ID 3. dump内存信息 Jmap -dump:format=b,file=YYMMddhhmm.dump pid 4.top查看cpu占用信息 ...

noob_chr
30分钟前
1
0
Android TV开发-按键焦点

写在前面 按键焦点过程了解 2.1 dispatchKeyEvent 过程了解 2.2 焦点查找请求过程了解 1.2.1 第一次获取焦点 1.2.3 按键焦点 焦点控制 焦点记忆 应用场景 参考资料 [TOC] 1. 写在前面 工...

冰雪情缘l
30分钟前
1
0
java框架学习日志-3

这章主要是补充一些ioc创建对象的方式,ioc容器在写好<bean></bean>的时候就已经创建对象了。在之前的例子中,一直都是无参的构造方法。下面给出有参的构造方法的对象的创建,没有什么难点重...

白话
33分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部