Git Product home page Git Product logo

play-audio's Introduction

play-audio

Lightweight Wrapper For HTML5 Audio API

play = require('play-audio')

play('song.mp3').autoplay()

Install

$ npm install play-audio

Browser Compatibility

play(['song.mp3', 'song.ogg']).play()

Displaying Controls

parent = document.querySelector('.my-player')
play(['song.mp3', 'song.ogg'], parent).autoplay.controls()

How to use without NPM?

If your application isn't structured as a CommonJS package, you can download the distribution file;

$ wget https://raw.github.com/azer/play-audio/master/dist/play-audio.js

And include it on your page:

<script src="play-audio.js"></script>
<script>
  playAudio(['song.mp3', 'song.ogg'])
</script>

Changing Source After Initialization

p = play(['song.mp3', 'song.ogg']).autoplay()
p.src()
// => ['song.mp3', 'song.ogg']

p.src(['new.mp3', 'new.ogg']).play()
p.src()
// => ['new.mp3', 'new.ogg']

API

Example:

play('foo.mp3').volume(0.3).controls().loop().on('ended', function(){
  console.log('End of the song reached')
})

Reference:

  • play(uri, parentElement)
  • .controls
  • .currentTime
  • .element
  • .loop
  • .muted
  • .on(event, function)
  • .pause
  • .play
  • .preload
  • .src(url)
  • .volume(number)

Events

  • abort
  • durationchange
  • ended
  • error
  • pause
  • play
  • progress
  • timeupdate

See complete reference

play-audio's People

Watchers

James Cloos avatar Matt DesLauriers avatar  avatar

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.