https://github.com/acusti/audile

Mobile-friendly audio player optimized for use with longer-form audio
https://github.com/acusti/audile

audio audio-player audiobooks podcasts

Last synced: 27 days ago
JSON representation

Mobile-friendly audio player optimized for use with longer-form audio

• Host: GitHub
• URL: https://github.com/acusti/audile
• Owner: acusti
• License: unlicense
• Created: 2021-01-04T21:45:34.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2021-08-03T02:30:41.000Z (over 3 years ago)
• Last Synced: 2025-01-22T23:13:35.838Z (30 days ago)
• Topics: audio, audio-player, audiobooks, podcasts
• Language: JavaScript
• Homepage:
• Size: 27.3 KB
• Stars: 1
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
audile

======

[![latest version](https://img.shields.io/npm/v/audile?style=for-the-badge)](https://www.npmjs.com/package/audile)

[![bundle size](https://img.shields.io/bundlephobia/minzip/audile?style=for-the-badge)](https://bundlephobia.com/package/audile)

_A mobile-friendly audio player optimized for use with longer-form audio. [See it in action.](https://www.chrispattonmusic.com/nissas-flute/)_

Features

--------

* Supports both a single audio track or multiple tracks in order (e.g. a playlist)

* Saves last-played track and playhead location and restores them when returning to that page

* Features a simple mobile-first design with touch-friendly controls ([see example](https://www.chrispattonmusic.com/nissas-flute/))

* Includes controls for previous and next track and for skipping backwards or forwards 15 seconds

* Shows the title of the current playing track in the player

* Weighs in at around 10KB (minified) with no dependencies

Usage

-----

Include the library anywhere in your page HTML (insert desired version number in place of `1.0.1`):

```html

```

Add the audio files you want to be playable by the player inside a `.audile` containing element:

```html



    
The Ricky Gervais Show: The Complete First Season

    

    

    

    

    

    

    

    

    

    

    

    



```

You can fix the player to the bottom or top of the viewport via the `data-adl-attach` attribute:

```html


…


…

```