• 000-000-0000

    工作时间

    周一至周五:7:00-21:00

    周末及节日:9:00-18:00

  • 手机版二维码

    随时打赏站长

  • 扫描二维码

    随时打赏站长

Green Audio Player 绿色极简网页音频播放器

图文教程 CG小霸王
2020-3-24 18:04 326人浏览 0人回复
原作者: greghub 来自: https://github.com/greghub/green-audio-player 收藏 邀请

下载:geen-audio-player-master.7z


安装

Github

下载存储库ZIP。

CDN

或者,您可以从CDN加载它:

< link  rel = “ stylesheet ”  type = “ text / css ”  href = “ https://cdn.jsdelivr.net/gh/greghub/green-audio-player/dist/css/green-audio-player.min.css “ > < 脚本 src = ” https://cdn.jsdelivr.net/gh/greghub/green-audio-player/dist/js/green-audio-player.min.js “ > 

NPM

npm i green-audio-player

用法

包含green-audio-player.cssgreen-audio-player.min.css文件:

< link  rel = “ stylesheet ”  type = “ text / css ”  href = “ {path} /dist/css/green-audio-player.min.css ” >

green-audio-player.js文件(或green-audio-player.min.js):

< 脚本 src = “ {path} /dist/js/green-audio-player.js ” > 

将音频标签添加到容器内部。您可以自由添加任何属性。绿色音频播放器不会更改音频标签,因此,例如,如果您希望音频循环播放,可以将loop属性添加到音频标签。

< div  class = “ gap-example ” > 
    < 音频 > 
        < source  src = “ audio / example-1.mp3 ”  type = “音频/ mpeg ” > 
     

这将初始化绿色音频播放器

新的 GreenAudioPlayer('. gap-example ');

您可以在一个页面上添加多个播放器。

有一种初始化多个Green Audio Player的较短方法:

GreenAudioPlayer。init({ 
    选择器: '. player ',//在具有类“ player” 
    stopOthersOnPlay : true的每个音频容器上初始化Green Audio Player );

/examples有关单个和多个播放器的演示,请参考文件夹。

选件

选项 描述 价值观 默认
stopOthersOnPlay 其他音频播放器在播放时是否会暂停播放 true, false false
showDownloadButton 允许下载音频文件。显示下载按钮。 true, false false
enableKeystrokes 玩家具有与功能相关的击键。 true, false false
showTooltips 焦点上可见播放,音量和下载按钮的标签 true, false false

工具提示选项需要showTooltips在播放器上设置为true。

辅助功能

为了提高可访问性,可以通过传递enableKeystrokes选项来启用键盘导航默认情况下,大纲在元素上处于禁用状态。如果要向元素添加轮廓,请player-accessible向播放器元素添加类:

< div  class = “ player-1玩家可访问” > ... 

您可以使用Tab键专注于元素,并使用以下键来使用播放器控件。

行动
标签 专注于下一个元素
Shift + Tab 专注于上一个元素
Enter或空格键 暂停/播放
右箭头 快进
左箭头 倒带
Enter或空格键 显示/隐藏音量滑块
向上箭头 增加音量
向下箭头 减少音量
输入 下载



路过

雷人

握手
2

鲜花

鸡蛋

刚表态过的朋友 (2 人)

本文暂无评论,快来抢沙发!

热门教程
客服电话
000-0000-0000

24x7小时合作咨询

  • 官方在线客服

    QQ客服:B王

    点击交谈

    QQ汉化群:凌云

    点击加入
  • 安徽省芜湖市镜湖区E3栋9-10门面

  • 手机扫码查看手机版

    手机查找资源更方便

  • 扫一扫关注官方微信

    加入官方微信群

Powered by Discuz!X3.4 ©2020-2050 Comsenz Inc.CG资源网( 皖ICP备16018371号 )营业执照