jQuery HTML元素音频特效插件EasyAudioEffects.js

所属分类:媒体-音频和视频

 37409  436  查看评论 (8)
分享到微信朋友圈
X
jQuery HTML元素音频特效插件EasyAudioEffects.js ie兼容10

简要教程 

easyaudioeffects是一款非常简单实用的HTML元素发音音频特效jQuery插件。该插件基于HTML5 audio元素来制作各种HTML元素的发音效果。它使用简单,支持鼠标滑过和鼠标点击两种事件,可以兼容IE9以上的现代浏览器。

使用方法

使用该背景图片插件需要引入jQuery(jQuery需要1.7以上版本)和jquery.easyAudioEffects.js文件。

<script src="js/jquery.min.js"></script>
<script src="jquery.easyAudioEffects.js"></script>

初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该元素发音插件。在初始化时要指定音频文件的两种格式:*.ogg和 *.mp3

$('.selector').easyAudioEffects({
   ogg : "/path/to/sound.ogg",
   mp3 : "/path/to/sound.mp3"
});

配置参数 

下面是该元素发音插件可用配置参数。 

参数类型默认值描述
oggstringnone必须填写这个参数。ogg文件所在的路径
mp3stringnone必须填写这个参数。mp3文件所在的路径
eventTypestring"hover"触发元素发音的事件。可以是"hover" 或 "click"
playTypestring"oneShotPolyphonic"可以是"oneShotPolyphonic" , "oneShotMonophonic" , "gate" 或 "loop"


应用举例

eventType

$('.selector').easyAudioEffects({
   ogg : "./path/to/sound.ogg",
   mp3 : "./path/to/sound.mp3",
   eventType : "hover" // 或 "click"
});

playType

playType : "oneShotPolyphonic"

$('.selector').easyAudioEffects({
   ogg : "./path/to/sound.ogg",
   mp3 : "./path/to/sound.mp3",
   eventType : "hover", // or "click"
   playType : "oneShotPolyphonic"
});

playType : "oneShotMonophonic"

$('.selector').easyAudioEffects({
   ogg : "./path/to/sound.ogg",
   mp3 : "./path/to/sound.mp3",
   eventType : "hover", // or "click"
   playType : "oneShotMonophonic"
});

playType : "gate"

$('.selector').easyAudioEffects({
   ogg : "./path/to/sound.ogg",
   mp3 : "./path/to/sound.mp3",
   eventType : "hover", // or "click"
   playType : "gate"
});

playType : "loop"

$('.selector').easyAudioEffects({
   ogg : "./path/to/sound.ogg",
   mp3 : "./path/to/sound.mp3",
   eventType : "hover", // or "click"
   playType : "loop"
});


相关插件-音频和视频

jQuery小果音乐播放器(原创)

小果音乐播放器,界面简约清新,功能实用
  音频和视频
 17148  182

音乐泡泡排序(CPC泡泡排序)

泡泡排序制作的音乐剧!每个音高被分配一个与其比例程度相对应的数字 (例如 c 大调中的 C 将从0-7 数字中获得 )。
  音频和视频
 20095  242

1:1模仿虾米音乐播放器,歌词与播放进度同步

能够很好地对歌词进行同步,1:1模仿虾米音乐播放器,希望有兴趣的朋友能够相互支持。
  音频和视频
 48600  472

Html5 手机视频播放器自适应

Html5 手机视频播放器自适应
  音频和视频
 140497  616

讨论这个项目(8)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    J丶兆 0
    2017/9/14 16:04:21
    插件写的好,还免费,感谢 回复
    落叶飘零 0
    2016/10/28 17:10:29
    连续点几个语音,会一起播放;怎么控制点另外一个,之前播放的那个就暂停掉??? 回复
    落叶飘零 0
    2016/10/28 14:10:31
    怎么播放的时候会一直出现卡顿现象呢?你们不会? 回复
    云淡风轻 0
    2016/10/10 17:10:50

    太**魔性了,那个女人叫的

        MaYusuf0
        2016/10/11 18:10:06
        O(∩_∩)O哈哈~
        用户68618083000
        2020/5/22 14:46:23
        哪里有女人叫
    回复
    Sear 0
    2016/10/2 17:10:12
    简~单~ 0
    2016/9/30 14:09:57
    很实用的插件,收藏  回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复