最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

HTML5实现迷你音频播放器效果

来源:http://www.erdangjiade.com/js/8633.html 沐浴春风 2019-02-25 22:33浏览(142)

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

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

HTML5实现迷你音频播放器效果
分类:html5 > 视频 难易:入门级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 1 积分
引入文件
在页面中引入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');
});
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/8633.html
评论6
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 5楼
    03-13 09:28
    tian0922
    一个人失败的最大原因,就是对于自己的能力永远不敢充分信任,甚至认为自己必将失败
  • 头像 4楼
    03-05 09:33
    tian0922
    哪怕是最没有希望的事情,只要有一个勇敢者去坚持做,到最后就会拥有希望。
  • 头像 3楼
    03-04 09:57
    tian0922
    最困难的时候,就是距离成功不远了。
  • 头像 板凳
    03-01 10:02
    tian0922
    懦弱的人只会裹足不前,莽撞的人只能引为烧身,只有真正敢的人才能所向披靡。
  • 头像 椅子
    02-27 15:46
    tian0922
    艺术的大道上荆棘丛生,这也是好事,常人望而却步,只有意志坚强的人例外<br />
  • 头像 沙发
    02-26 22:31
    janry
    挺不错,学习下
1 2