안녕하세요 간만에 글남기네요
node를 이용한 스트리밍전송에대해 공부하면서 정리를 하고있어서 그부분에 대해서도 천천히포스팅할 예정입니다
자바스크립트를 이용해 간단하게 음악파일을 읽어 재생시키는 방법을 알아보려합니다
HTML
JAVASCRIPT
이와같이 파일을 선택받고 플레이버튼을 누르면 재생이됩니다
다음포스팅은 Node 를 이용한 스트리밍서버 and 파일전송을 해볼예정입니다
| JavaScript :: 한글만 추출하는 정규식 (0) | 2017.03.09 |
|---|---|
| JavaScript :: array 특정요소 삭제 (0) | 2017.02.08 |
| JavaScript :: async.forEachOf (0) | 2017.02.01 |
| JavaScript :: mouseover (마우스오버) (0) | 2017.01.13 |
| JavaScript :: callbackhell(콜백헬) (0) | 2017.01.07 |
최근에 작업을 하다보니 제가원하는 것은 예를들어 "버스커버스커" 만을 원하는데
크롤링을 하다보면 버스커 버스커 ( busker busker) 이렇게 입력되어 잇는곳이 몇군데 있다
그래서 한글만 추출을 어떻게 하나 고민끝에 정규식을 이용하면 간편하다는 글을보고 찾아서 해보았다
1 | var Artist = config.bugstrack[0].Artist.replace(/[^\uAC00-\uD7AF\u1100-\u11FF\u3130-\u318F]/gi,"") | cs |
config.bugstrack[0].Artist == 버스커 버스커 (busker busker) 입니다
그후 뒤에있는 정규식을 한글을 제외한 문자,특수문자,공백 등등을 지우는 정규식입니다
유용하게 사용하시면 될거같습니다
| JavaScript :: mp3 파일을 읽어서 재생시키기 (3) | 2017.04.03 |
|---|---|
| JavaScript :: array 특정요소 삭제 (0) | 2017.02.08 |
| JavaScript :: async.forEachOf (0) | 2017.02.01 |
| JavaScript :: mouseover (마우스오버) (0) | 2017.01.13 |
| JavaScript :: callbackhell(콜백헬) (0) | 2017.01.07 |
포스팅을 근 한달만에 하네요....
이전에 작업하던 기능에서 가수들의 앨범과 곡들을 크롤링한후 다운받을수있도록 추가해봤습니다
++ 추가사항
벅스뮤직을 이용해 크롤링한후 연동시키려 했지만 API가 2013년인가부로 중단되서 크롤링하는걸로 방향을 바꿨습니다
우선 제가 좋아하는 아티스트인 박지윤을 검색해보면
목록들을 크롤링한후 앨범을 클릭하면
매치를한후 앨범트랙을 유튜브랑 매칭시켜서 다운을 받을수 있도록 하고 또한
+ 버튼을 클릭시 이전에 작업해둔 플레이리스트에서 바로 들을수 있도록 추가하였습니다
| MoonEDM :: 데일리차트추가 & UI변경 (2) | 2017.08.14 |
|---|---|
| DEVLOG_function.js (0) | 2017.06.20 |
| MoonEDM :: 작업일지(3) (0) | 2017.02.18 |
| MoonEDM :: 작업일지(2) (0) | 2017.02.08 |
| MoonEDM :: 작업일지(1) (0) | 2017.02.01 |
@ngrx/store 프레임워크를 소개해볼까합니다 ..
구글에 검색을 해보면 영문으로 자세한소개랑 사용예제들은 나와있지만 한국어로 사용법이나 메카니즘 설명같은것이부족해
공부하면서 적어보려고한다
공식 깃허브의 document 인용합니다 https://gist.github.com/btroncone/a6e4347326749f938510
Angular 2의 출현으로 새로운 프레임 워크의 기능과 기능으로 새로운 패턴, 모범 사례 및 라이브러리가 생겨났는데 그중에 하나가
@ngrx/store 입니다
Angular 위에 성능이 뛰어나고 일관된 응용 프로그램을 작성할 수 있도록 설계된 제어 된 상태 컨테이너입니다
핵심 개념이 3가지가있는데 reducers, actions, and a single application store 이 세가지가 있다
응용프로그램을 설계할떄 1스토어 계약을 체결함으로써 어느지점에서든 스토어의 스냅샷은 해당응용 프로그램 상태를 완전히
표시합니다 이는 사용사 상호작용 , 디버깅및 angular2 에서 매우 강력하게 작용합니다
1. Reducer
이벤트와 관련된 형식 및 선택적 데이터(페이 로드)입니다 이전 상태와 관련된 데이터 및 옵션과 관련된 2개의 인수를 수용합니다
1 2 3 | export interface Reducer<T> { (state: T, action: Action): T; } | cs |
이 프로세스는 작업이 완료될 때마다 발생하며, 응용 프로그램 상태가 시간이 지남에 따라
완전한 응용 프로그램 상태를 변경할 수 있게 합니다.
1 2 3 4 | export interface Action { type: string; payload?: any; } | cs |
1 2 | //action with an associated payload dispatch({type: ADD_TODO, payload: {id: 1, message: 'Learn ngrx/store', completed: true}}) | cs |
@ngrx/store 에 대해 간단하게 알아보았습니다 구글번역도움을 맞아서 말이이해가안될수도있습니다 ...
자세하게 보실려면 깃허브 documnet 참고 하시면될거같습니다
다음 포스팅은 데모 예제와 실제 코딩된 예제에 대해 포스팅하겠습니다
| Angular2 :: socket.IO-Stream in Angular2 (0) | 2017.05.11 |
|---|---|
| Angular2 :: socket.IO in Angular2 (0) | 2017.04.05 |
| Angular2 :: 'unsafe value' exception (0) | 2017.02.01 |
| Angular2 :: Jquery 사용법 (0) | 2017.01.24 |
| Angular2 :: Add Module 3 (그래프) (0) | 2017.01.10 |
이런저런공부 하다보니 포스팅이 늦었네요 ..
이전 버전에 추가기능을 도입했습니다
플레이리스트를 만들어 웹상에서 실시간으로 내가원하는곡을 추가해서 들을수있도록 기능을 만들었습니다
메인페이지
메인페이지의 배경을 바꿔주었습니다 배경이미지는 GIPHY 에서 구했습니다 상단메뉴에 플레이스트를 추가시켜 주었습니다
플레이리스트
곡명을 검색해서 목록을보여주고 추가를 해주면 해당곡을 실시간으로 스트리밍 해주는 기능을 추가했습니다
만드는데 사용된 프레임워크는 깃허브에 기재했습니다
깃허브 : https://github.com/choy1379/MoonEDM
| DEVLOG_function.js (0) | 2017.06.20 |
|---|---|
| MoonEDM :: 벅스뮤직 + 아티스트앨범 추가 (0) | 2017.03.09 |
| MoonEDM :: 작업일지(2) (0) | 2017.02.08 |
| MoonEDM :: 작업일지(1) (0) | 2017.02.01 |
| MoonEDM :: 0 시작 (0) | 2017.01.25 |
Array 즉 배열 같은경우에는 추가는 push 삭제는 pop 을이용한다
push 는 맨앞의 값삭제
pop 은 맨뒤의 값삭제
하지만 코딩을 하다보면 특정값이 들어간 배열을 삭제하고 싶을경우가 있다 이럴경우에는 .splice() 을 이용하면 간단하게 된다
예를 들어보겠습니다
textarea 안에 줄띄움값과 빈값 등을 거르고 한줄씩 값을 읽어와보겠습니다
1 2 3 4 5 6 7 8 | var tracklist = this.textdownload.split('\n') for(var i = 0; i < tracklist.length; i ++) { if(tracklist[i].length == 0) { tracklist.splice(i, 1); } } | cs |
tracklist 라는 변수에는 '\n' 을 split 을 해주면 배열값은
"" 값 도 포함이된 상태로 저장이됩니다 그래서 for 문을 배열의 length 만큼 돌려주고
그배열의 length == 0 즉 length 값이 "" 인것을 선별해주어서 splice (i,1) 을 해주시면
보이는 것과 같이 배열이 완성됩니다
| JavaScript :: mp3 파일을 읽어서 재생시키기 (3) | 2017.04.03 |
|---|---|
| JavaScript :: 한글만 추출하는 정규식 (0) | 2017.03.09 |
| JavaScript :: async.forEachOf (0) | 2017.02.01 |
| JavaScript :: mouseover (마우스오버) (0) | 2017.01.13 |
| JavaScript :: callbackhell(콜백헬) (0) | 2017.01.07 |
