{"id":22485247,"url":"https://github.com/dascritch/cpu-audio","last_synced_at":"2025-08-02T18:31:54.962Z","repository":{"id":52438576,"uuid":"129592875","full_name":"dascritch/cpu-audio","owner":"dascritch","description":"An audio WebComponent to provide timecoded links and other features to an audio tag","archived":false,"fork":false,"pushed_at":"2023-10-01T15:54:57.000Z","size":4417,"stargazers_count":23,"open_issues_count":43,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2023-10-01T19:57:26.586Z","etag":null,"topics":["audio-player","hyperlink","playlist","sound","timecoded-links","vanilla","webcomponents"],"latest_commit_sha":null,"homepage":"https://dascritch.github.io/cpu-audio/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dascritch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2018-04-15T08:52:50.000Z","updated_at":"2023-10-01T19:57:26.587Z","dependencies_parsed_at":"2023-01-19T02:00:28.127Z","dependency_job_id":null,"html_url":"https://github.com/dascritch/cpu-audio","commit_stats":null,"previous_names":[],"tags_count":25,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dascritch%2Fcpu-audio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dascritch%2Fcpu-audio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dascritch%2Fcpu-audio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dascritch%2Fcpu-audio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dascritch","download_url":"https://codeload.github.com/dascritch/cpu-audio/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228499926,"owners_count":17929986,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["audio-player","hyperlink","playlist","sound","timecoded-links","vanilla","webcomponents"],"created_at":"2024-12-06T17:12:15.760Z","updated_at":"2024-12-06T17:14:09.009Z","avatar_url":"https://github.com/dascritch.png","language":"JavaScript","readme":"CPU-Audio WebComponent\n======================\n\n[An audio WebComponent to provide an user-interface, timecoded links and some other features to an `\u003caudio\u003e` tag.](https://dascritch.github.io/cpu-audio/)\n\n\u003c!-- calling the webcomponent --\u003e\n\u003ccpu-audio \n    title=\"Au carnaval avec Samba Résille (2003)\"\n    poster=\"https://dascritch.net/vrac/.blog2/entendu/.1404-SambaResille_m.jpg\"\n    canonical=\"https://dascritch.net/post/2014/04/08/Au-Carnaval-avec-Samba-R%C3%A9sille\"\n    waveform=\"./tests-assets/waveform-sambaresille.png\"\n    twitter=\"@dascritch\"\n    \u003e\n    \u003caudio controls id=\"sound\"\u003e\n        \u003csource src=\"https://dascritch.net/vrac/sonores/podcast/1404-SambaResille2003.mp3\" type=\"audio/mpeg\"\u003e\n    \u003c/audio\u003e\n    \u003c!-- {% include no_component_message.html %} --\u003e\n\u003c/cpu-audio\u003e\n\n\nPurpose\n-------\n\nA generic WebComponent crafted with a hashtag observer for `\u003caudio\u003e` tags with fancy interface, hyperlinks, chaptering, playlist and share buttons.\n\nWhen you load a page :\n\n1. if your URL has a hash with a timecode (`https://example.com/page#tagID\u0026t=10m`), the service will position the named `\u003caudio controls\u003e` at this timecode (here, `#TagID` at 10 minutes) ;\n2. or, if a audio source (qualified by its url) was played in your website, and was unexpectedly exited, the service will reposition its `\u003caudio controls\u003e` at the same timecode.\n\nDuring the page life :\n\n* if an `\u003caudio controls\u003e` anchor \u003ca href=\"https://dascritch.github.io/cpu-audio/#sound\u0026t=10m\"\u003eis linked with a timecode, as `\u003ca href=\"#sound\u0026t=10m\"\u003e`\u003c/a\u003e, the service will play this tag at this timecode ;\n* no cacophony : when a `\u003caudio controls\u003e` starts, it will stop any other `\u003caudio controls\u003e` in the page ;\n* if you have a `\u003ccpu-controller\u003e` in your page, it will clone the playing `\u003ccpu-audio\u003e` interface.\n\n\u003ca href=\"https://dascritch.github.io/cpu-audio/#sound\u0026t=20m45s\"\u003eThis link starts the upper player at 20:45\u003c/a\u003e, and a link can limit \u003ca href=\"https://dascritch.github.io/cpu-audio/#sound\u0026t=5s,7s\"\u003eplaying between a start (0:05) and end (0:08) marks\u003c/a\u003e\n\n\nFeatures\n---------\n\n[TL;DR ? See it in action](https://dascritch.github.io/cpu-audio/FEATURES)\n\n* hyperlink `\u003caudio\u003e` tags to a specific time, using not well-known [Media Fragment standards](https://www.w3.org/TR/media-frags/) ;\n* standards first, future-proof ;\n* only one single file to deploy ;\n* pure vanilla, no dependencies to any framework, so usable in *any* JS framework ;\n* progressive enhancement, can works even without proper WebComponent support ;\n* add an UI, customizable via attributes and CSS variables ;\n* exists in different graphic themes ;\n* responsive liquid design ;\n* recall the player where it was unexpectedly left (click on a link when playing) ;\n* play only one sound in the page ;\n* playlist with auto-advance ;\n* play only a range between 2 timestamps ;\n* chapters, using standards WebVTT ;\n* alternate navigation for a finest precision on smartphones ;\n* global `\u003ccpu-controller\u003e` .\n\nIt could have been done via polyfills or frameworks, but I wanted a plain standard, vanilla javascript, easy to install and configure.\n\n\nHOW TO install\n--------------\n\nA unique and lightweight js file to install, without any dependencies.\n\n* [How to install, deploy and customize on your server](https://github.com/dascritch/cpu-audio/blob/master/INSTALL.md)\n* [You can try playing with our live configurator tool](https://dascritch.github.io/cpu-audio/applications/live_config.html)\n* [See it running in our demonstration site](https://dascritch.github.io/cpu-audio/)\n* See [basic examples](https://dascritch.github.io/cpu-audio/examples.html) and applications with advanced use cases\n* [A React .jsx example](https://github.com/dascritch/cpu-audio/blob/master/examples/Call_from_React.jsx)\n\n\nKeyboard functions\n------------------\n\nWhen the interface got the focus, you can use those keys :\n\n* \u003ckbd\u003eSpace\u003c/kbd\u003e : play/pause audio\n* \u003ckbd\u003eEnter\u003c/kbd\u003e : play/pause audio (only on play/pause button)\n* \u003ckbd title=\"left arrow\"\u003e←\u003c/kbd\u003e : -5 seconds\n* \u003ckbd title=\"right arrow\"\u003e→\u003c/kbd\u003e : +5 seconds\n* \u003ckbd title=\"begin\"\u003e↖\u003c/kbd\u003e : back to start\n* \u003ckbd\u003eEnd\u003c/kbd\u003e : to the end, finish playing, ev. skip to the sound in playlist\n* \u003ckbd\u003eEscape\u003c/kbd\u003e : back to start, stop playing\n* \u003ckbd title=\"up arrow\"\u003e↑\u003c/kbd\u003e and \u003ckbd  title=\"down arrow\"\u003e↓\u003c/kbd\u003e : move focus between entries in panels (\u003ckbd\u003eEnter\u003c/kbd\u003e to select)\n\nFor handheld users, a long press on the timeline will show you another interface for a more precise navigation (Desktop users can try it via a right click on it).\n\n\nSome links\n----------\n\n* [Demonstration site](https://dascritch.github.io/cpu-audio/)\n    * [Features](https://dascritch.github.io/cpu-audio/FEATURES)\n    * [How to install](https://github.com/dascritch/cpu-audio/blob/master/INSTALL.md)\n    * [Live configuration](https://dascritch.github.io/cpu-audio/applications/live_config.html)\n* [JS installable code](https://github.com/dascritch/cpu-audio/blob/master/build/cpu-audio.js) \n* [Code repository](https://github.com/dascritch/cpu-audio/), [Latest stable release](https://github.com/dascritch/cpu-audio/releases/latest)\n* [Frequently Asked Questions](https://github.com/dascritch/cpu-audio/blob/master/FAQ.md)\n* Blog posts about its creation and development : [Série cpu-audio sur dascritch.net](https://dascritch.net/serie/cpu-audio)\n* [How to cite a podcast](https://www.buzzsprout.com/blog/cite-podcast), now you can support time positions URL\n* Main author : [Xavier \"dascritch\" Mouton-Dubosc](http://dascritch.com)\n* [Licence LGPL 3](https://github.com/dascritch/cpu-audio/blob/master/LICENSE.md)\n\n\nParticipate\n-----------\n\n* [Contribute in any way](https://github.com/dascritch/cpu-audio/blob/master/CONTRIBUTING.md)\n* [Where we are now](https://github.com/dascritch/cpu-audio/blob/master/RELEASE.md)\n* [Tests](tests/tests-minimal.html)\n* [Bugs, issues, tickets and features](https://github.com/dascritch/cpu-audio/issues)\n* [What to do, next](https://github.com/dascritch/cpu-audio/blob/master/TODO.md)\n\n\nCredits\n-------\n\nThank you to my lovely friends :\n* [Thomas Parisot](https://oncletom.io/) for suggestions\n* [Loïc Gerbaud](https://github.com/chibani), [Guillaume Lemoine](https://www.linkedin.com/in/glguillaumelemoine/) and [Guillaume de Jabrun](https://github.com/Wykks) for bug-hunting\n* [Benoît Salles](https://twitter.com/infestedgrunt) and [Michel Poulain](https://twitter.com/MichelPoulain) for testing\n* [@mariejulien](https://twitter.com/mariejulien/status/1047827583126183937) about [CONTRIBUTING.md](https://github.com/dascritch/cpu-audio/blob/master/CONTRIBUTING.md)\n* [Christophe Porteneuve](https://github.com/tdd) of [Delicious Insights](http://delicious-insights.com/) to kick my ass on modern javascript.\n* [scombat for a wonderful wrapper of cpu-audio.js in React](https://github.com/scombat/react-cpu-audio)\n* [Éric Daspet for its remarks on documentation](https://github.com/edas)\n* [Gabi Boyer for helping me avery a lot to debug iOS issues](https://twitter.com/GabiBoyer)\n\nReally sorry, [NerOcrO](https://github.com/NerOcrO)\n\n\nKeeping in touch\n----------------\n\n* professional \u003chttp://dascritch.com\u003e\n* blog \u003chttp://dascritch.net\u003e\n* twitter : [@dascritch](https://twitter.com/dascritch)\n\n\u003c!-- {% include footer.html %} --\u003e\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdascritch%2Fcpu-audio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdascritch%2Fcpu-audio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdascritch%2Fcpu-audio/lists"}