Code Monkey home page Code Monkey logo

echofly's Introduction

CS 290 Final Project

Links:

  • https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API
  • https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API

Interface References: https://clyp.it/

Library:

  • mongodb
  • handlebars

Site will be able to record audio from user's mic input to store onto a database to be re-accessed later.

HTML lacking:

  • Popup page for signup button
  • Popupp page for upload button
  • Popupp page for signin button

Feedback: There probably doesn't need to be two titles for the website. The second one says Echofly instead of Echofy (FIXED). There's a lot of negative space around creators and clips(FIXED). To fix this, the clips right margin should be aligned under the creators so they match. Other than that, it looks really good.

index.js: Filled in some js using project 5 functions. Need modals to finish.

index.html: Changed some html titles. We may need to give separate class name to the usernames in the clips container because if the modal searches text values, the images' html may be picked up by it.

modal work: I created a basic modal layout with a player that will be used to load the most currently recorded clip. I've sourced that player from jplayer.org

Files from jplayer.org that can be moved to their own folder within public:

  • jquery.jplayer.min.js
  • jquery.min.js
  • All other side files labeled with jplayer

Modal lacking:

  • javascript for adding clips that that player and website
  • clearing of information when closed (FIXED)
  • adding charachter limit to title and author entires(not a priority yet)

index.js: added getUserMedia() function and an event listener for recordClip(), but site doesn't ask for access to microphone for some reason and clicking record doesn't do anything. I added clearing of text values when adding text in the modal. Also, tried to fix modal background but not sure why it isn't being displayed. It may have something to do with the ordering of the CSS because I vaguely remember Hess mentioning modal backdrop wouldn't work if it is ordered incorrectly.

app.js: created app.js to write js for recording audio from modal. The clip should then load into the player, but I'm not sure what all of that jquery code is doing. I tried moving the jplayer files into a separate folder and adding scripts for them in home.handlebars, but they all disappeared from pages so I moved them back. Maybe they need to be labeled as a dependency in package.json. I'm not sure what to do with this jquery code.

The recorder is recognized now and should ask for permission to use a mic. Record button records, but we just need somewhere to load the clip and play it.

echofly's People

Contributors

dillanea avatar cqlim avatar workerl3 avatar tkwebster avatar

Watchers

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