html5 audio音频播放全解析

最新推荐文章于 2024-05-31 22:11:41 发布

永远的新手

最新推荐文章于 2024-05-31 22:11:41 发布

阅读量330

点赞数

分类专栏： JavaScript H5

本文链接：https://blog.csdn.net/learn8more/article/details/103721264

版权

本文详细介绍了HTML5 audio标签的使用，包括基本语法、属性（src, controls, loop, autoplay）以及对象属性和方法（currentTime, duration, play, pause, load）。同时提到了音频播放的事件，如play, pause以及加载过程中的多个事件。" 82460997,7939828,JWT实现单点登录：完全跨域解决方案,"['JWT', '单点登录', '授权机制', '跨域处理', '安全']

摘要由CSDN通过智能技术生成

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

最低0.47元/天解锁文章

永远的新手

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5 audio音频播放全解析

1.html5 audio的语法以及属性和方法使用语法<audio src="song.mp3" controls="controls" loop="loop" autoplay="autoplay">亲您的浏览器不支持html5的audio标签</audio>属性src是歌曲的路径controls播放控制如果给标签里写了 controls="cont...
复制链接

扫一扫