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

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

 37518  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"
});


相关插件-音频和视频

完美仿网易网页侧边隐藏音乐播放器

非常好用的网页侧边音乐播放器(在服务器下完美运行)
  音频和视频
 48754  435

canvas视频录制(原创)

mediarecoder录制媒体流 canvas绘制动画 导出录像视频
  音频和视频
 16730  150

jQuery实现Winamp2播放器插件

win95时代的经典音频播放器,现在我们来通过网页来实现这款播放器。怀旧一下过去的时光。
  音频和视频
 29859  291

js音频可视化插件Wavesurfer.js

Wavesurfer.js是一个javascript库用于创建交互式可操作音频可视化,使用Web Audio和HTML5 Canvas技术。可以显示当前音频的声波
  音频和视频
 62697  347

讨论这个项目(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
    很实用的插件,收藏  回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复