Giter Club home page Giter Club logo

cpu-audio's Introduction

CPU-Audio WebComponent

An audio WebComponent to provide an user-interface, timecoded links and some other features to an <audio> tag.

Some links :

Version : 5.3 Licence GPL 3

Purpose

An hashtag observer for <audio> tags with fancy interface, hyperlinks and share buttons.

When you load a page :

  1. if your URL has an hash with a timecode (page#tagID&t=10m), the service will play the named <audio controls> at this timecode (here, #TagID at 10 minutes) ;
  2. else, if a <audio controls> with a url <source> was played in your website, and was unexpectedly exited, the service will play the <audio controls> at the same timecode.

During the page life :

  • if an <audio controls> anchor is linked with a timecode, as <a href="#sound&t=10m">, the service will play this tag at this timecode ;
  • no cacophony : when a <audio controls> starts, it will stop any other <audio controls> in the page ;
  • if you have a <cpu-controller> in your page, it will clone the playing <cpu-audio> interface.

This link starts the upper player at 20:45

Features

TL;DR ? See it in action

  • hyperlink <audio> tags to a specific time, Media Fragment standards ;
  • standards first, future-proof ;
  • only one single file to deploy ;
  • pure vanilla, no dependencies to any framework ;
  • progressive enhancement, can works even without proper WebComponent support ;
  • add an UI, customizable via attributes and CSS variables ;
  • responsive liquid design ;
  • recall the player where it was unexpectedly left (click on a link when playing) ;
  • play only one sound in the page ;
  • playlist with auto-advance ;
  • play only a range between 2 timestamps ;
  • chapters ;
  • global <cpu-controller> .

It could have been done via polyfills or frameworks, but I wanted a plain standard, vanilla javascript, easy to install and configure.

WebComponents will work mainly on :

  • Google Chrome
  • Firefox (63 +)
  • Safari Mac
  • Safari iOS

WebComponent standard won't be implemented, the hash links will work but without the interface :

  • Edge

Keyboard functions

When the interface got the focus, you can use those keys :

  • Space : play/pause audio
  • Enter : play/pause audio (only on play/pause button)
  • : -5 seconds
  • : +5 seconds
  • : back to start
  • End : to the end, finish playing, ev. skip to the sound in playlist
  • Escape : back to start, stop playing

For handheld users, a long press on the timeline will show you a bench of buttons for a more precise navigation.

HOW TO install

Participate

Versions

  • April 2018 : 5 , forking to cpu-audio, WebComponent version
  • August 2017 : 4 , i18n, modularization, clone
  • August 2015 : 3 , forking to ondemiroir-audio-tag, for launching CPU radio show
  • October 2014 : Final version of timecodehash
  • September 2014 : 2 , correcting to standard separator
  • September 2014 : 1 , public announcing
  • July 2014 : 1.a , public release
  • June 2014 : 0.2 , proof of concept
  • October 2012 : first version, trashed

Credits

Thank you to my lovely friends :

Really sorry, NerOcrO

Keeping in touch

cpu-audio's People

Contributors

dascritch avatar nerocro avatar

Stargazers

Vincent AUDIBERT avatar

Watchers

James Cloos avatar Jean 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.