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

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

 8760  77  查看评论 (6)
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"
});


相关插件-音频和视频

音乐歌词同步播放器

jplayer实现歌词同步的JS音乐播放器效果
  音频和视频
 5653  55

jQuery网页跨平台媒体播放器

用于Web的可扩展的媒体播放器,跨平台,支持HLS,MP3,MP4等格式。
  音频和视频
 34614  71

jquer视频插件jPlayer跨设备兼容

jquer视频插件jPlayer跨设备兼容,精简整理删除多余文件,方便使用。
  音频和视频
 3563  23

video封装ui

videoui无任何依赖,代码注释很清楚。
  音频和视频
 15828  52

讨论这个项目(6)回答他人问题或分享插件使用方法奖励jQ币

    落叶飘零 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哈哈~
    回复
    Sear 0
    2016/10/2 17:10:12
    简~单~ 0
    2016/9/30 14:09:57
    很实用的插件,收藏  回复
取消回复