插件 jQuery.Ion.Sound 中文API文档

🌙
手机阅读
本文目录结构

插件 jQuery.Ion.Sound 中文API文档 https://github.com/IonDen/ion.sound ion.sound

English description | Описание на русском

JavaScript plugin for playing sounds on user actions and page events.


Description

  • Ion.Sound — JavaScript-plugin for playing sounds based on Web Audio API.
  • Plugin is working on most popular desktop and mobile browsers and can be used everywhere, from common web sites to browser games.
  • For not so modern browsers plugin falls back to HTML5 audio.
  • Audio-sprites support included.
  • Ion.Sound freely distributed under terms of MIT licence.
  • 25 free sounds included

Today websites are full of events (new mail, new chat-message, content update etc.). Often it is not enough to indicate this events only visually to get user attention. You need sounds! This library, made for playing small sounds, will help you with this task. Also, new version of Ion.Sound is capable to handle browser games audio. It has full control of loading, playing and removing audio files. And audio-sprites support of course.

Supported browsers

Desktop Windows, OS X, Linux:

  • Google Chrome
  • Mozilla Firefox
  • Microsoft Internet Explorer 9.0+
  • Opera 12.16+
  • Safari 5.1+ (Safari on Windows requires QuickTime to play sounds)

Mobile:

  • iOS Safari and others (with some restrictions)
  • Android Google Chrome and others (with some restrictions also)
  • WP8 Internet Explorer

Can i use Web Audio API and HTML5 Audio?

Demos

Dependencies

  • None

Usage

Import this library:

  • ion.sound.min.js

Prepare sound-files (25 sounds are included) and put them in some folder (eg. “sounds”):

  • my_cool_sound.mp3
  • my_cool_sound.ogg
  • my_cool_sound.aac

It is not enough to have only MP3-file, you should make OGG and AAC-file too, because not all browsers support MP3.
You can easily convert you MP3-s to OGG-s and AAC-s at Media.io or at CloudConvert.org.
AAC support was added to improve cross browser support of iOS 8.x devices (iPhone, iPad)

Install with bower

  • bower install ionsound

Install with npm

  • npm install ion-sound

Install with spm

  • spm install ion-sound

Initialisation

To initialise plugin call this method:

ion.sound({
    sounds: [
        {
            name: "my_cool_sound"
        },
        {
            name: "notify_sound",
            volume: 0.2
        },
        {
            name: "alert_sound",
            volume: 0.3,
            preload: false
        }
    ],
    volume: 0.5,
    path: "sounds/",
    preload: true
});

And play sound!

// Simple
ion.sound.play("my_cool_sound");

General settings

    <tr>
        <td>path</td>
        <td>-</td>
        <td>string</td>
        <td>Path to file</td>
    </tr>
    <tr>
        <td>preload</td>
        <td>false</td>
        <td>boolean</td>
        <td>Preloading sounds</td>
    </tr>
    <tr>
        <td>multiplay</td>
        <td>false</td>
        <td>boolean</td>
        <td>Sound multi play. If set, will allow to play multiple instances of one sound at once</td>
    </tr>
    <tr>
        <td>loop</td>
        <td>false</td>
        <td>boolean/number</td>
        <td>If set to true will enable infinite loop. Or paste a number to set loop limit</td>
    </tr>
    <tr class="options__step">
        <td>volume</td>
        <td>1.0</td>
        <td>number</td>
        <td>Playback volume from 0 to 1</td>
    </tr>

    <tr>
        <td>scope</td>
        <td>null</td>
        <td>object</td>
        <td>Callbacks will be called in that object's scope</td>
    </tr>
    <tr>
        <td>ready_callback</td>
        <td>null</td>
        <td>function</td>
        <td>Called after sound file is fully uploaded (or ready to play for HTML5 audio)</td>
    </tr>
    <tr>
        <td>ended_callback</td>
        <td>null</td>
        <td>function</td>
        <td>Called each time then sound file will reach it's end</td>
    </tr>
</tbody>
Option Defaults Type Description
sounds - array Collection of sound objects. Each object contains information about sound file and (optional) individual settings

Sound object

Option Defaults Type Description
name - string File name. Plugin will choose file extension automatically (.mp3, .ogg, .aac, .mp4 and etc.)
alias - string Alias for sound call, optional. Normally is used to shorten ion.sound calls
sprite - object Mark that sound is audio-sprite. This is an object. Example: {"part_name_1": [0, 2], "part_name_2": [2, 2]}
Part_name is a name of sprite piece (it is used instead of name to play a sound). And array with time marks: [start, duration] in seconds.
And also individual: path, preload, multiplay, loop, volume, scope and callbacks

Plugin can be launched in jQuery namespace

  • Use aliases to call any plugin methods: ion.sound(); -> $.ionSound();
  • ion.sound.play(“sound_name”); -> $.ionSound.play(“sound_name”);
  • Etc.

Update history


Support Ion-series plugins development:

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了