用<audio>标签打造一个属于自己的HTML5音乐播放器

上一章节,我们刚刚讲了<video>标签,今晚,我们讲的是<audio>标签,这两个东东除了表示的内容不一样以外,其他的特性相似的地方真的太多了,属性和用法几乎一样,也就说,如果上一章节你理解了,那么这一节你学起来会:毫无压力。

<audio>简介

<audio>标签:用于在文档中表示音频内容。利用它,你可以在你的个人网站上放一首你喜欢的歌。

    <audio src="music.mp3"></audio>

用法很简单,跟<video>标签一样,属性src指定音频文件地址。

如果你仅仅这样写,页面上不会看到有明显的东西,<audio>标签默认是隐藏的。

对于不支持<audio>标签的浏览器,会把标签的文本内容显示出来。

    <audio src="music.mp3">        别试了,是你的浏览器渣渣    </audio>

( 大家都叫我:IE8 )

为了方便我们对音频文件进行控制,操作它的进度、播放暂停、音量等等,我们可以给它添加controls属性:

    <audio src="m.mp3" controls></audio>

用法跟<video>标签一样。对于加上了controls属性, 不同的浏览器会展示不同样式的控制面板。

( chrome浏览器的音频控制面板 )

( firefox浏览器的音频控制面板 )

( IE浏览器的音频控制面板 )

哪个好看就见仁见智了~~

跟<video>标签一样,<audio>标签也有一个字标签:<source>。

它们的作用和用法都一样,就是用来引入多个音频,浏览器会选择一个支持的音频格式进行加载,对于不支持<audio>标签的浏览器,<source>元素也可以作为浏览器不识别的内容加入到文档中。

    <audio>        <source src="music.mp3">        <source src="music.ogg">        <source src="music.wav">    </audio>

注:主流的音频文件格式有:mp3、wav、ogg。不同的浏览器对三种格式支持程度不一样。其中mp3格式支持度最好。

autoplay属性:加载完成后,自动播放。也非常简单、使用。

   <audio src="m.mp3" autoplay></audio>

loop属性:顾名思义,循环播放。

    <audio src="m.mp3" loop></audio>

preload属性:用来控制音频在什么时候进行加载。

    <audio src="m.mp3" preload="auto"></audio>

对应的值有3种:

  • none:默认不加载,等有需要的时候再加载。
  • metadata:元数据,默认不加载,但是可以提取该音频的元数据信息。
  • auto:自动加载,网页加载完就加载整个音频。

muted属性:静音效果。

    <audio src="m.mp3" muted></audio>

加了muted属性,音频即使在播放的时候,也是没有声音,除非用户手动调整控制面板的音量。

JavaScript控制音频

JavaScript可以通过video对象控制网页视频;同样可以audio对象操作网页音频。

首先我们通过getElementById(ID)方法获取到一个audio对象。假设id为“music“。

    <audio id="music" src="m.mp3"></audio>

    let m = document.getElementById(‘music‘);

控制加载:

    m.load();//加载

如果你的<audio>标签是手动生成的节点,可以用load方法来实现加载。

控制播放:

    m.play();//播放

调用play( )方法可以执行播放。

控制暂停:

    m.pause();//暂停

调用pause( )方法可以执行暂停播放。

指定播放时间:

    m.fastSeek(20);

这样的话,音频会定位到20秒的播放位置。不过目前只有Firefox浏览器支持,你可以通过currentTime属性来实现。

获取和设置已播放的时间

    m.currentTime

通过currentTime属性,你可以拿到当前音频播放了多久,返回的数字以( s )秒为单位。

    m.currentTime = 10;

你也可以给它赋值,这样,音频会定位到10秒的播放位置。

是否自动播放:

    m.autoplay = true;//自动播放

可以直接在<audio>标签上加上autoplay属性,也可以通过JavaScript来设置autoplay属性。它是一个布尔值,true代表自动播放,false代表非自动播放

是否循环播放:

    m.loop = true;//循环播放

可以直接在<audio>标签上加上loop属性,也可以通过JavaScript来设置loop属性。它也是一个布尔值,true代表循环播放,false代表单曲播放

是否显示控制面板:

    m.controls = true;//显示控制面板

可以直接在<audio>标签上加上controls属性,也可以通过JavaScript来设置controls属性。它也是一个布尔值,true代表显示控制面板,false代表隐藏控制面板。

是否静音:

    m.muted = true;//静音

可以直接在<audio>标签上加上muted属性,也可以通过JavaScript来设置muted属性。它也是一个布尔值,true代表静音,false代表有声音

是否暂停:

    m.paused  //是否暂停  

判断音频当前是否暂停,返回true代表暂停,返回false代表正在播放;默认是true;该值只能读取,不能修改。

调用play( )方法后,m.paused的值会变成false;调用pause( )方法后,m.paused的值会变成true。

调节音量:

    m.volume = 0.1;

音量的取值范围在:0(无声)~1(最大声)之间。可以对volume属性赋合理的值或者做一些运算,来改变音频的音量。

以上就是<audio>标签很常用也很实用的一些属性和方法了。只要掌握了这些知识点,你就可以实现一个自己的音乐播放器。当然,<audio>标签还有其他属性,我不在这里展开, 学习的阶段只要掌握以上这些就够了,有兴趣的同学可以自行去网上搜索

时间: 2024-08-06 03:45:39

用<audio>标签打造一个属于自己的HTML5音乐播放器的相关文章

4个小时实现一个HTML5音乐播放器

技术点:ES6+Webpack+HTML5 Audio+Sass 这里,我们将一步步的学到如何从零去实现一个H5音乐播放器. 首先来看一下最终的实现效果:Demo链接 接下来就步入正题: 要做一个音乐播放器就要非常了解在Web中音频播放的方式,通常都采用HTML5的audio标签关于audio标签,它有大量的属性.方法和事件,在这里我就做一个大致的介绍. 属性:src:必需,音频来源:controls:常见,设置后显示浏览器默认的audio控制面板,不设置默认隐藏audio标签:autoplay

HTML5项目笔记4:使用Audio API设计绚丽的HTML5音乐播放器

HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道和一些元数据,这些是和你的视频或者音频控件绑定到一块的,这样才形成了一个完整的播放组件. 浏览器支持情况: 浏览器 支持情况 编解码器 Chrome 3.0 Theora . Vorbis .Ogg H.264 . AAC .MPEG4 FireFox 3.5 Theora . Vorbis .Og

使用Audio API设计绚丽的HTML5音乐播放器

HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道和一些元数据,这些是和你的视频或者音频控件绑定到一块的,这样才形成了一个完整的播放组件. 浏览器支持情况: 浏览器 支持情况 编解码器 Chrome 3.0 Theora . Vorbis .Ogg H.264 . AAC .MPEG4 FireFox 3.5 Theora . Vorbis .Og

一个功能齐全的IOS音乐播放器应用源码

该源码是在ios教程网拿过来的,一个不错的IOS音乐播放器应用源码,这个是我当时进公司时 我用了一晚上写的  图片都是在别的地方扒的,主要是歌词同步,及上一曲,下一曲,功能齐全了 ,大家可以学习一下吧.<ignore_js_op><ignore_js_op><ignore_js_op><ignore_js_op> 详细说明:http://ios.662p.com/thread-1599-1-1.html

html5 音乐播放器 audio 标签使用概述_html5教程技巧

<audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条 <audioid="media"src="http://www.niuzen.com/test.mp3"controls></audio> <video> 标签属性:src:视频的URLposter:视频封面,没有播放时显示的图片preload:预加载autoplay:自

一个使用 Web Components 的音乐播放器: MelodyPlayer

先上效果预览: Web Components 首先,什么是 Web Components ? MDN 给出的定义是: Web Components 是一套不同的技术,允许您创建可重用的定制元素(它们的功能封装在您的代码之外)并且在您的web应用中使用它们. ... ... 实现web component的基本方法通常如下所示: 使用 ECMAScript 2015 类语法创建一个类,来指定web组件的功能(参阅类获取更多信息). 使用 CustomElementRegistry.define()

一个简单有趣的Python音乐播放器

(赠新手,老鸟绕行0.0) Python版本:3.5.2 源码如下: __Author__ = "Lance#" # -*- coding = utf-8 -*- #导入相应模块 from pygame import mixer from pynput import keyboard from pynput.keyboard import Key #音量初始值(范围是 0~1 ) value = 0.5 #混音器初始化.加载音乐.播放音乐 mixer.init() mixer.musi

使用HTML5的Audio标签打造WEB音频播放器

目前,WEB页面上没有标准的方式来播放音频文件,大多数的音频文件是使用插件来播放,而众多浏览器都使用了不同的插件.而HTML5的到来,给我们提供了一个标准的方式来播放WEB中的音频文件,用户不再为浏览器升级诸如Adobe Flash.Apple QuickTime等播放插件,只需使用现代浏览器就可以聆听任何可以发出声音的WEB网站. WEB中的Audio标签 HTML5定义了一个新的元素用来指定标准的方式来插入音频文件到web页面中:<audio>标签.使用audio标签可以控制音频的播放与停

HTML5 audio标签 打造属于自己的音乐播放器

最近学习了HTML5中的Audio标签,学习他的最好方式当然是实践,于是就自己写了一个.那就直接上演示链接吧 http://htmlpreview.github.io/?https://github.com/djlxiaoshi/Audio/blob/master/music.html.模仿了QQ音乐网页版的部分样式.谁叫自己不会UI呢! HTML5中增加了Audio和Video标签,这两个标签的用法非常相似.功能却是相当强大,我们先来看一下Audio标签各个浏览器的支持情况.这里用的依然是Ca