https://github.com/hughsk/tap-to-start

https://github.com/hughsk/tap-to-start

Last synced: 12 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/hughsk/tap-to-start
• Owner: hughsk
• License: mit
• Created: 2016-05-15T09:59:17.000Z (over 8 years ago)
• Default Branch: gh-pages
• Last Pushed: 2016-06-28T01:59:49.000Z (over 8 years ago)
• Last Synced: 2024-10-17T16:37:18.945Z (22 days ago)
• Language: JavaScript
• Homepage: http://hughsk.io/tap-to-start/
• Size: 13.7 KB
• Stars: 48
• Watchers: 4
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# tap-to-start

A simple fullscreen button to prompt the user to tap/click. Useful for audio/video demos, where mobile devices require playback to be triggered in response to user input.

[![](http://i.imgur.com/Xex2wpJ.png)](http://hughsk.io/tap-to-start/)

[**view demo**](http://hughsk.io/tap-to-start/)

## Usage

### `tapToStart(options, done)`

Creates a new `tap-to-start` overlay. Accepts the following options:

* `foreground`: the color of the foreground circle. Defaults to `#000`.

* `background`: the color of the background. Defaults to `transparent`.

* `accent`: the color of the tap icon. Defaults to `background`, or `#fff` if not specified.

* `skip`: if truthy, skip the UI and call `done` in the next frame. Useful if you only want the UI to be visible if user input is required to continue.

* `parent`: optional, defaults to `document.body`. Set the element the button is attached to.

* `icon`: pass in a custom icon as an SVG element. Defaults to the one seen in the demo.

`done` is called when the UI is tapped/clicked and begins to transition out.

``` javascript

const tts = require('tap-to-start')

const audio = document.createElement('audio')

audio.src = 'song.mp3'

audio.load()

tts({

  background: '#000',

  foreground: '#fff'

}, function () {

  audio.play()

})

```

## License

MIT, see [LICENSE.md](LICENSE.md) for details.