HTML5迷你音频播放器

栏目: Html5 · 发布时间: 6年前

内容简介:这是一款HTML5迷你音频播放器插件。该音频播放器插件小巧、干净,可以自定义操作按钮,可以为页面提供最小的音乐播放器功能。

这是一款HTML5迷你音频播放器插件。该音频播放器插件小巧、干净,可以自定义操作按钮,可以为页面提供最小的音乐播放器功能。

查看演示 下载源码

引入文件

在页面中引入main.min.css和app.js文件。

<link rel="stylesheet" href="main.min.css">
<script src="app.js"></script>

HTML结构

使用下面的HTML结构来构建一个音频播放器。

<div class="example">
  <audio crossorigin>
    <source src="1.mp3" type="audio/mpeg">
  </audio>
</div>

初始化插件

然后在页面DOM元素加载完毕之后,通过下面的方法来初始化该音频播放器插件。

document.addEventListener('DOMContentLoaded', function() {
  new GreenAudioPlayer('.example');
});

以上所述就是小编给大家介绍的《HTML5迷你音频播放器》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

个体与交互

个体与交互

Ken Howard、Barry Rogers / 贾永娜、张凯峰 / 机械工业出版社华章公司 / 2012-3-20 / 45.00元

对敏捷软件开发的关注重点,通常都集中在“机制”方面,即过程和工具。“敏捷宣言”认为,个体与交互的价值要高于过程和工具,但这一点很容易被遗忘。在敏捷开发中,如果你重新将注意力放在人的方面,将会收获巨大利益。 本书展示了如何解决敏捷团队在实际项目中遭遇的问题。同时,本书也是很有实用价值的敏捷用户指南,其中包含的故事、最佳实践方法、经验以及技巧均可应用到实际项目当中。通过逐步实践,你将学会如何让团......一起来看看 《个体与交互》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具