JH Music Player

(former name as jh-lrc) JH Music Player use Modern Browsers feature AudioContext and FileReader to make a web-base music player that can load lyric, audio, image[album cover] files from local file system.
You can simply drag files to the browser when you're using desktop browsers, or use File-Input button to add your files on your phones.

Current UI design is imitating one of the most popular music players called 'Cloud Music' from NetEase.
Icons come from Material Icons by Google, and Octicons by GitHub. Generated as font using IcoMoon App.
(this project was first started as a lyric file parser and display.)

visit JH Music Player (http://music.jonham.cn/) to enjoy your music.
And you're welcome to fork and issue whatever come up in your mind.

---

Features going to add

1. WebSocket, with the help of Pusher: makes Remote Controls.
2. generate music (or noises) by pure JavaScript (AudioContext): DJ music playing platform
3. analyse and regnize beats and tones.
4. Audio recording using WebRTC or AudioContext output
5. scripts making to Video or audio: add time tags and fix accuration.
6. more UI besides NetEase one.
7. Online Engine lyric search Engine or Song message search Engine, further album cover search engine
8. "Functional HTML DOM Elements" constructions

• Event-Driven or State-Driven mode.
• Canvas: visual display of music.
• History API for using return button on browsers to route between each page and menu
• Alternate Plan make AJAX audio loading as a alternate plan when user device don't support AudioContext

---

Features or Functions need tests

1. Supports for Browsers: both Wechat and UC won't crack, but with same error message
   • Wechat(enbeded QQ Browser): auto crack down
     BUGS: attachNodeToElement.js:300 drag.js:73
   • UC browser : unique input[type=file], crack down when select any kind of files BUGS: attachNodeToElement.js:300 drag.js:73
     Solution: the crack down on both browser may due to the fact that browser receive unhandled errors.I've catch errors both in rangeTime and rangeVolume.
   • onResize() don't work on browser don't support AudioContext
2. Song and SongList
   • !IMPROTANT songlist occur when playing in mobile device, which loading file will take more time, that all songs don't play but just looping between others
   • songlist mode detail completion
   • play multi songs when user click .nextSong btn for many times before last song asynchronous actions ready
   • songlist .next, .play, .pause, .stop ...
   • songlist .playNext, .playPre and related songlist.next and songlist.pre
   • songlist: play-modes, counts
   • song.timeOffset records ctx.currentTime when song begin
   • requestAnimationFrame() to update audio time19. - [ ] open-screen animation :::: need more tests
3. Event-Driven Emitter need add listenTo or others method

---

Bugs need fix

6. touch events:
   • cancel browsers default gestures detection ( e.preventDefault, e.stopPropagation )
   • prevent continuing clicks
   • wait and react until animations stop
7. lyric and cover
   • lyric loader and timeupdate event for AudioContext decoded audio
   • lyric Empty lines handling
   • empty lines display: filled with '...'
   • lyric and album image load when another start
   • lyric parser for compressed lyric files
8. main parts display: Pages, menus, sidebar
   • #sidebar-left bottom position
   • #page-comments .btn-back position to highlight
   • FOR ALL: add max-height or max-width to each
   • FOR ALL: display style and position when on Desktop
9. Integration
   • bind up related blocks
10. Canvas for Audio Visualization
    • animation delay on poor supported Devices
    • more display styles [black, white]
11. History API
    • basic pushState() return to PageSystem and close menu or sidebar
    • states interruptions: close menu will also return to pageSystem
    • destop alt+arrow will cause some faults when state overwrite
12. Supports among browsers
    • controls in mainpage display in iPhone4 (narrow in width)
    • supports information for all kind of Browsers
    • supports for Devices like iPhone or other weak supports of HTML5, to provide a alternate options to load a remote file and lyric to enjoy the player
13. Alternate Plan
    • for devices don't support import media files and lyric files (like iPhone)
    • for devices don't support AudioContext
14. FullScreen API
    • FullScreen API for devices
    • FullScreen Event listeners on other state change
    • to hide FullScreen button when is not available
15. main DOM elements display
    • <input type='file> display
    • highlight Ranges objects
    • #page-comments needs basic framework setup
16. dConsole window display
    • dConsole display when button 'show console' was pressed
    • display in FullScreen mode. [ change as a float window on the head of viewport]
17. Icons and Display
    • Icons for each Page and Menu items
    • sub-controls bar in #page-system ( btn-play circle display)
    • zip up svg files of icon
    • images and icons preload
18. Events
    • rangeTime throw error when drag event happened before the audio is playing:SOLUTION:just unbind the function when there is no audio playing
19. control funcs and buttons
    • play, nextSong buttons to work on SongList
    • mute and volume controls on SongList
20. mask layer
    • mask layer for avoiding mistake touches and clicks