当前位置：首页 > 网页特效 > 音频和视频

简单的HTML元素发音音频特效jQuery插件

分类：音频和视频日期：2024-05-14 点击(3) 评论(0)

简介

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

```html
<script src="js/jquery.min.js"></script>
<script src="jquery.easyAudioEffects.js"></script>  
```              
#####  初始化插件
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该元素发音插件。在初始化时要指定音频文件的两种格式：*.ogg和 *.mp3。

```html
$('.selector').easyAudioEffects({
   ogg : "/path/to/sound.ogg",
   mp3 : "/path/to/sound.mp3"
});  
```            
#####  配置参数
下面是该元素发音插件可用配置参数。

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

####  应用举例

------------

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

playType : "oneShotPolyphonic"

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

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

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

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

web299.com

简单的HTML元素发音音频特效jQuery插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果