서문 : 이것은 내가 최근에 배운 작은 데모의 요약입니다. 여전히 사용하는 것이 먼 길이지만 지식 포인트를 실천하고 통합하는 것이 좋습니다. 최근에 JS Books 및 Boostrap.css의 소스 코드를 탐색했습니다. 이 데모를 한 후에는 임시 끝입니다. 다음은 jQuery의 소스 코드와 boostrap.js의 소스 코드입니다. 작업은 매우 힘들다. 어서, 나는 전체 기사에 코드를 게시하지 않을 것입니다. 관심이 있으시면 메시지를 보내 주시면 코드를 전달할 수 있습니다 ~
텍스트:
먼저 렌더링
1. 레이아웃 : 부스트랩의 반응 형 및 적응 형 레이아웃은 제거 할 수 없습니다. 컨테이너의 중첩 행은 각각 옆으로 중첩되고 메인 (H5 New Tag) 및 Div (ID = "MusicConsole")가 각각 각각 중첩됩니다. 왼쪽의 음악 목록은 제외하고, Main은 오른쪽의 가사 디스플레이 박스이며, Div는 아래의 제어 상자입니다.
2. 주요 구현 기능 :
(1) 노래 추가 (노래 목록의 오른쪽 상단에 "+"아이콘)와 노래 삭제 (노래 목록의 오른쪽 상단에있는 "트럼프"아이콘)
(2) 노래 목록에서 노래를 클릭하십시오. 트랙이 재생됩니다. 가사가 있다면 가사가 표시되고 가사가 없으면 "No 가사"가 표시됩니다. 노래가 진행됨에 따라 진행률 바와 시간이 바뀔 것입니다.
(3) 이전 버튼 (수직 라인 + 삼각형)을 클릭하면 이전 노래가 재생됩니다. 가사가 있으면 가사가 스크롤링되고 가사가 없으면 "No 가사"가 표시됩니다. 노래가 진행됨에 따라 진행률 바와 시간이 바뀔 것입니다.
재생 버튼 (삼각형)을 클릭하면 일시 정지 버튼 (이중 수직선)으로 변경되며 노래는 플레이 상태에서 일시 정지 상태로 변경됩니다.
다음 버튼 (삼각형 + 수직선)을 클릭하면 다음 노래가 재생됩니다. 가사가 있으면 가사가 표시되고 가사가 없으면 "No 가사"가 표시됩니다. 노래가 진행됨에 따라 진행률 바와 시간이 바뀔 것입니다.
오디오 버튼 (스피커)을 클릭하면 음소거 버튼 (스피커 + "x")이되며 그에 따라 노래도 음소거됩니다.
루프 버튼 (화살표로 원)을 클릭하면 단일 재생이됩니다. 루프 버튼을 유지하면 단일 루프가 반복됩니다.
3. 발생하는 문제 :
(1) 글리 피콘의 크기는 글꼴 크기로 변경됩니다
부스트랩 아이콘이 사용되므로 기본 크기가 너무 작습니다. 너비와 높이를 시도했지만 응답하지 않았습니다. 나는 글꼴 크기를 사용하여 크기를 변경한다는 것을 깨달았습니다.
(2) str.replace (Oldstr, Newstr)
재생 버튼을 클릭하면 재생 상태가 변경되고 버튼 아이콘이 그에 따라 변경됩니다. 따라서 교체는 사용되지만 오랫동안 응답하지 않았습니다. 원래 문자열이 아니라 끈을 재생하고 있기 때문이라는 것이 밝혀졌습니다.
(3) 보안 고려 사항으로 인해 브라우저가 로컬 파일을 읽는 것은 어렵습니다.
나는 원래 LocalStorage를 사용하여 음악 목록에 내용을 저장하려고했지만 H5의 Filereader와 오랫동안 시도했지만 방법은 없었습니다. 나는 포기해야했다.
Filereader는 사진 또는 HTML 파일을 읽는 데 사용될 수 있습니다. readasdataurl 메소드는 파일 경로를 얻을 수 있습니다. 이것에 대해 말하면, 나는 정말로 웃고 싶다. 음악 파일을 저장하려고했습니다. 좋아, 가자, 뭐? LocalStorage가 메모리가 떨어지고 있습니까? 5m 파일 경로를 저장합니까? 재미있는 나?
다음 질문은 모두 가사에 있습니다. . . 나는 그것을 할 때 매우 피곤하다고 느낍니다. . .
(4) 가사를 분석 할 때 발생하는 문제
가사는 일반적으로 LRC 파일이지만 실제로는 일반 텍스트입니다. Ajax를 사용하여 배경에서 데이터를 전송할 수 있지만 나와 함께 재생할 배경은 없으므로 가사를 직접 복사하여 DEAD 데이터로 문자열로 쓸 수 있습니다.
원래 Split ( '/r/n')를 사용하여 문자열을 문장으로 문장의 가사로 나누고 배열에 넣을 계획이었습니다.
결과적으로 다양한 오류를보고했습니다. 오랜 시간이 지난 후 마침내이 분할에서 그것을 발견했습니다. 나는 그것을 오랫동안 온라인으로 확인했고 JS 냄비로 판명되었습니다.
JS 구문은 마지막에 세미콜론을 추가하도록 강요하지 않기 때문에 시스템 라인 브레이크 (즉, 캐리지 리턴)를 사용하여 고정됩니다. 두 가지 주요 응답 계획이 있습니다.
1) Newline 문자를 수동으로 삭제하고 /n Newline을 대신 사용하십시오. 이 솔루션은 페이지에 Newline 영향을 미칩니다.
2) 추가 / 시스템 라인 브레이크 문자 이전 에이 체계는 페이지에 라인 브레이크 효과가 없습니다.
(5) 가사를 스크롤 할 때 발생하는 문제
가사가 성공적으로 추가 된 후에는 완벽하게 표시되지만 음악과 동기화되어야합니다. 현재 재생 시간과 비교하여, 해당 가사 목록이 위로 올라가는 양, 가사가 비어있을 때, 최종 경계 판단, 이러한 모든 문제가 해결되면 루프 재생이 나타나고 가사를 다시 표시 할 수 없습니다. 오랫동안 나는 거기에 갔다. 루프 = true 일 때 종료 된 이벤트를들을 수 없었기 때문입니다. 방법이 없었기 때문에 루프 만 포기하고 종료 된 이벤트에 루프의 판단을 추가 할 수있었습니다.
글쎄, 그것은 아주 좋고 완벽하게 표시되어 있으며 조금 흥분합니다. 모든 곳에서 약간 지저분하고 테스트에 문제가 있는지 보여줍니다. 끝날 수 있다고 생각했을 때, 나는 또 다른 실수 [Indifference.jpg]를 만들었으므로 조정합시다. 먼저 오류의 이유를 찾으십시오. F12 개발자 도구 (위에서 쓴 바이두로 갔다)에서, 나는 두 가사가 동시에 추가 된 것을 보았으므로 스크롤 업이 너무 빠르고 잠시 동안 위아래로 점프 할 것이다. 범인이 발견되었습니다. 재귀적인 호출이기 때문에 CLCLEARTIMEOUT가이를 지우려면 필요합니다. 좋아, 기본적으로 지금은 문제가 없다.
나중에 :
아, 그리고 최근에 Red Deer에 매료 되었기 때문에, 나는 친절하게 선수를 "Morocco Player"로 지명했습니다. 그리고 당신은 발생하는 주요 문제가 가사의 디스플레이 문제라는 것을 알 수 있습니다. 그러나 무엇이든, 나는 마침내 그것을 만들었습니다. 그것이 마침내 정상적으로 출시되었다는 것을 보았지만, 성취감은 여전히 매우 좋았습니다. 이 블로그를 작성하는 것처럼 완료되었지만 오류 오류를 다시 찾았습니다.
위의 것은 편집자가 HTML5+Boostrap을 사용하여 간단한 음악 플레이어를 만들기 위해 소개 한 것입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!