Git Product home page Git Product logo

pitch-detection-app's Introduction

Pitch Detection App

An open source pitch detection app that uses Rust and WebAssembly

Live Demo

Demo Page

Components

Core Pitch Detection Library

Communication with web worker

WebAssembly Wrapper

  • Rust / wasm-bindgen (source)

Pitch Visualization

  • TypeScript, HTML5 Canvas, D3 (source)

Single Page App

Building

# Build wasm
# Prerequisite: cargo and wasm-pack
cd wasm
wasm-pack build --target web

# Build the visualization
cd ../display
npm install
npm run build

# Start the app
cd ../client
npm install
npm run start

pitch-detection-app's People

Contributors

alesgenova avatar dependabot[bot] avatar hitgo00 avatar siefkenj avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

pitch-detection-app's Issues

Missing License?

I poked around but I didn't see any license file. Is this project being released under an open source license?

no sound is being detected

I tried to use your app by pressing the play button to see if any sound was detected and nothing showed up on the screen. Just wanted to bring this to your attention.

fix(minor): readme

Update the wasm build command: wasm-pack --target web -> wasm-pack build --target web

Feature idea: Play and display sound file's pitch to user

Love what you've built @alesgenova!

I would love to use the pitch detection app for singing practice: I'd like to upload a sound file (or specify it from the command line), that would be played and its pitch displayed. User could sing and see visually if their singing pitch is correct.

som error happend

when i run client, report this error

'require is not defined' on file work.js var init = require('pitch-detection-wasm');

how can I fix it

Blank page

Hey thank you for this repo!

Not sure what I am doing wrong, but I am just getting a blank page when I run start and navigate to http://localhost:8080/client/public/ which is where the app is accessible from a docker container.

The docker container itself is from https://github.com/btassone/docker-wasm-rust/
and I had trouble with it as well so perhaps this is the issue: btassone/docker-wasm-rust#1

So, I figured I would just install the pitch-detection-app and resolve any dependancies as needed. Only, I am not quite sure if I was supposed to install each of the components first?

Anyway, Here are the warnings I see:

``
npm run start

[email protected] start /var/www/html/project/pitchperfect/www/dist/client
npm run build:worker && react-scripts start

[email protected] build:worker /var/www/html/project/pitchperfect/www/dist/client
rollup -c

worker/index.ts โ†’ public/pitch-detection/worker.js...
(!) Plugin typescript: @rollup/plugin-typescript TS5055: Cannot write file '/var/www/html/project/pitchperfect/www/dist/client/src/constants/colors.js' because it would overwrite input file.
(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
pitch-detection-wasm (imported by worker/index.ts)
created public/pitch-detection/worker.js in 16.8s

Compiled with warnings.

src/components/loader/index.tsx
Line 3:10: 'BACKGROUND' is defined but never used @typescript-eslint/no-unused-vars
Line 36:67: Using target="_blank" without rel="noreferrer" is a security risk: see https://html.spec.whatwg.org/multipage/links.html#link-type-noopener react/jsx-no-target-blank
Line 45:71: Using target="_blank" without rel="noreferrer" is a security risk: see https://html.spec.whatwg.org/multipage/links.html#link-type-noopener react/jsx-no-target-blank
Line 85:11: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text

src/components/pitch/index.tsx
Line 6:33: 'SECONDARY_LIGHT' is defined but never used @typescript-eslint/no-unused-vars
Line 6:66: 'PRIMARY_LIGHT' is defined but never used @typescript-eslint/no-unused-vars
Line 99:13: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.


Thanks again! 

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.