{"id":22679267,"url":"https://github.com/cliffhall/react-dtmf-dialer","last_synced_at":"2025-04-12T14:54:30.146Z","repository":{"id":148698057,"uuid":"163109482","full_name":"cliffhall/react-dtmf-dialer","owner":"cliffhall","description":"Demonstrates using React and Redux middleware to control a Web Audio API system by simulating a TouchTone keypad","archived":false,"fork":false,"pushed_at":"2018-12-28T17:56:28.000Z","size":227,"stargazers_count":10,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-26T09:39:53.670Z","etag":null,"topics":["dtmf","middleware","react","react-redux","redux","tutorial","webaudio","webaudio-api"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cliffhall.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-12-25T20:23:29.000Z","updated_at":"2024-06-19T23:25:42.000Z","dependencies_parsed_at":"2023-06-12T13:00:41.251Z","dependency_job_id":null,"html_url":"https://github.com/cliffhall/react-dtmf-dialer","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cliffhall%2Freact-dtmf-dialer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cliffhall%2Freact-dtmf-dialer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cliffhall%2Freact-dtmf-dialer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cliffhall%2Freact-dtmf-dialer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cliffhall","download_url":"https://codeload.github.com/cliffhall/react-dtmf-dialer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248586238,"owners_count":21128995,"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":["dtmf","middleware","react","react-redux","redux","tutorial","webaudio","webaudio-api"],"created_at":"2024-12-09T18:25:55.296Z","updated_at":"2025-04-12T14:54:30.140Z","avatar_url":"https://github.com/cliffhall.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-dtmf-dialer\n\n## What is this?\nA simple demo showing how to use React and Redux middleware to control a Web Audio API system.\n\n[DTMF](https://en.wikipedia.org/wiki/Dual-tone_multi-frequency_signaling) (Dual-tone multi-frequency) signaling is the\naudio protocol used by TouchTone telephones to dial numbers. In short, when a key on the keypad is pressed, two\nfrequencies are emitted, according to the following table:\n\n![DTMF Tones](public/dtmf-tones.png \"DTMF Tones\")\n\nWe can simulate a TouchTone keypad using the\n[Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)\nby wiring up a couple of\noscillators and telling them which frequencies to play when we press a key. The\nquestion is how to interface such an audio system with a React/Redux application.\n\nWith React/Redux, reducers generally handle actions that we dispatch from the UI,\ne.g., 'play these two tones'. However reducers are meant to manage serializable\napplication state. A Web Audio system is not a serializable object and has no place\nbeing handled in a reducer. Instead, we handle such things with middleware.\n\nThis demo and [the accompanying video](https://youtu.be/zps9YDPJha0) and [article](http://cliffordhall.com/2018/12/controlling-web-audio-with-react-and-redux-middleware/) demonstrate how to achieve that.\n\n## Setup\n\n### Install Node and npm\n[Node](https://nodejs.org/en/download/) 10.0 or above (also installs npm)\n\n### Install Node modules\n```cd path/to/react-dtmf-dialer``` (the rest of this document assumes you are at this location)\n\n```npm install```\n\n## Launch\n\nThe npm script to launch the application has been defined in ```package.json```.\n\n#### Inside your IDE\nIf you're running a modern IDE like Webstorm, you can just open the npm window and double-click on each ```start``` script.\n\n#### From the command line\n\n```npm run start```\n\nOnce that's done, open a browser window and navigate to ```http://localhost:3000/```\n\nYou should see the application keypad:\n\n![DTMF Keypad](public/dialpad.png \"Touch Tone Keypad\")\n\nClick a key to hear that TouchTone goodness.\n\n## Dependencies\nThis React client uses:\n  * [react-scripts](https://www.npmjs.com/package/react-scripts) for abstracting away the config of Babel, Webpack, and JSX\n  * [redux](https://github.com/reduxjs/redux) to manage application state\n  * [react-redux](https://github.com/reduxjs/react-redux) to inject the store's dispatch function and selected parts of the\napplication state into any component's props.\n  * [bootstrap](https://getbootstrap.com/) for UI components\n  * [react-bootstrap](https://react-bootstrap.github.io/) for integration of bootstrap with react\n  * [styled-components](https://www.styled-components.com/) to apply CSS for managing the layout and making the buttons nice and square\n  * [react-app-rewired](https://github.com/timarney/react-app-rewired) for overriding react-scripts so styled-components can do its magic\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcliffhall%2Freact-dtmf-dialer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcliffhall%2Freact-dtmf-dialer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcliffhall%2Freact-dtmf-dialer/lists"}