Giter Site home page Giter Site logo

motorcortex-sounddrag's Introduction

MotorCortex-SoundDrag

Table of Contents

Demo

Check it out here

Intro / Features

The MotorCortex-SoundDrag is a plugin that allows you to add music or sound effects easily to your clips. Go to sounds.donkeyclip.com find the sound you like to use from a big list of license-free sounds and copy the name of the sound. Then create a new track incident and use the copied name as the value for the attribute key name and you have done.

Getting Started

Installation

$ npm install --save @donkeyclip/motorcortex-sounddrag
# OR
$ yarn add @donkeyclip/motorcortex-sounddrag

Importing and loading

import { loadPlugin } from "@donkeyclip/motorcortex/";
import SoundDragPlugin from "@donkeyclip/motorcortex-sounddrag";
const SoundDrag = loadPlugin(SoundDragPlugin);

Creating Incidents

Track

const newHTMLClip = new SoundDrag.Track(
  {
    name: "Electronic-Violin_16057",
    startFrom: 0,
    duration: 2000,
    fadeIn: false,
    fadeOut: false,
  },
  {
    repeats: 3,
    hiatus: 1000,
    delay: 1000,
    id: "myClip",
  }
);

Track Attrs

Name Are Values
name name of the sound from donkeyclip.sounddrag.com sting
startFrom millisecond which sound start playing num
duration for how long the sound will play num
fadeIn this will enable the fadein effect boolean
fadeOut this will enable the fadeout effect boolean

Extra Effects with AudioEffect

If fadeIn and fadeOut effects are not enough for you, you can create your effects using MotorCortex AudioEffect to apply your custom effect you need an id to select the Audio source this id is "track-id" and then add the incident to the track incident.

Example

const MyEffect = new AudioEffect(
  {
    animatedAttrs: {
      pan: 1,
      gain: 0,
    },
  },
  {
    selector: "~#track-id",
    duration: 3000,
  }
);

trackIncident.addIncident(MyEffect, 1000);

IMPORTANT

You should import AudioEffect from MotorCortex.

import { AudioEffect } from "@donkeyclip/motorcortex";

Adding Incidents in your clip

clipName.addIncident(incidentName,startTime);

Contributing

In general, we follow the "fork-and-pull" Git workflow, so if you want to submit patches and additions you should follow the next steps:

  1. Fork the repo on GitHub
  2. Clone the project to your own machine
  3. Commit changes to your own branch
  4. Push your work back up to your fork
  5. Submit a Pull request so that we can review your changes

License

MIT License

Sponsored by

motorcortex-sounddrag's People

Contributors

alexdor avatar elisavetampatzidou avatar github-actions[bot] avatar ivanvl01 avatar kissmybutton-bot avatar renovate-bot avatar renovate[bot] avatar

Watchers

 avatar  avatar

motorcortex-sounddrag's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

  • chore(deps): replace dependency rollup-plugin-terser with @rollup/plugin-terser 0.1.0
  • chore(deps): update dependency webpack-dev-server to v4.15.2
  • chore(deps): update babel monorepo to v7.24.6 (@babel/cli, @babel/core, @babel/eslint-parser, @babel/plugin-syntax-jsx, @babel/plugin-transform-react-jsx, @babel/preset-env)
  • chore(deps): update dependency @donkeyclip/motorcortex to v9.17.1
  • chore(deps): update dependency core-js to v3.37.1
  • chore(deps): update dependency css-loader to v6.11.0
  • chore(deps): update dependency webpack to v5.91.0
  • chore(deps): update reviewdog/action-eslint action to v1.24.0
  • chore(deps): update dependency babel-loader to v9
  • chore(deps): update dependency concurrently to v8
  • chore(deps): update dependency css-loader to v7
  • chore(deps): update dependency eslint to v9
  • chore(deps): update dependency eslint-config-prettier to v9
  • chore(deps): update dependency eslint-plugin-prettier to v5
  • chore(deps): update dependency husky to v9
  • chore(deps): update dependency prettier to v3
  • chore(deps): update dependency rimraf to v5
  • chore(deps): update dependency rollup to v4
  • chore(deps): update dependency size-limit to v11
  • chore(deps): update dependency webpack-cli to v5
  • chore(deps): update dependency webpack-dev-server to v5
  • chore(deps): update googlecloudplatform/release-please-action action to v4
  • chore(deps): update peaceiris/actions-gh-pages action to v4
  • chore(deps): update peter-evans/create-pull-request action to v6
  • ๐Ÿ” Create all rate-limited PRs at once ๐Ÿ”

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions
.github/workflows/bundle-size.yml
  • actions/checkout v3.6.0
  • actions/setup-node v3.8.2
  • pkg-size/action v1
.github/workflows/eslint.yml
  • actions/checkout v3.6.0
  • reviewdog/action-eslint v1.23.0
.github/workflows/github-page.yml
  • actions/checkout v3.6.0
  • actions/setup-node v3.8.2
  • peaceiris/actions-gh-pages v3.9.3
.github/workflows/misspell.yml
  • actions/checkout v3.6.0
  • sobolevn/misspell-fixer-action 0.1.0
  • peter-evans/create-pull-request v3.14.0
.github/workflows/release-please.yml
  • actions/checkout v3.6.0
  • GoogleCloudPlatform/release-please-action v3.7.13
  • actions/checkout v3.6.0
  • actions/setup-node v3.8.2
.github/workflows/test.yaml
  • actions/checkout v3.6.0
  • actions/setup-node v3.8.2
npm
package.json
  • @babel/cli 7.23.9
  • @babel/core 7.23.9
  • @babel/eslint-parser 7.23.10
  • @babel/plugin-syntax-jsx 7.23.3
  • @babel/plugin-transform-react-jsx 7.23.4
  • @babel/preset-env 7.23.9
  • @donkeyclip/motorcortex 9.15.0
  • @donkeyclip/motorcortex-player 2.10.11
  • @rollup/plugin-babel 5.3.1
  • @rollup/plugin-commonjs 21.1.0
  • @rollup/plugin-json 4.1.0
  • @rollup/plugin-node-resolve 13.3.0
  • @size-limit/preset-big-lib 6.0.4
  • babel-loader 8.3.0
  • concurrently 7.6.0
  • core-js 3.36.0
  • css-loader 6.10.0
  • eslint 7.32.0
  • eslint-config-prettier 8.10.0
  • eslint-config-standard 16.0.3
  • eslint-plugin-babel 5.3.1
  • eslint-plugin-import 2.29.1
  • eslint-plugin-node 11.1.0
  • eslint-plugin-prettier 4.2.1
  • eslint-plugin-promise 5.2.0
  • husky 7.0.4
  • prettier 2.8.8
  • rimraf 3.0.2
  • rollup 2.79.1
  • rollup-plugin-terser 7.0.2
  • size-limit 6.0.4
  • webpack 5.90.1
  • webpack-cli 4.10.0
  • webpack-dev-server 4.15.1
  • node >=10

  • Check this box to trigger a request for Renovate to run again on this repository

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.