반응형 jQuery, CSS, HTML11 [jQuery + HTML + CSS] 오디오 플레이어 만들기 - 1. 회사에서 진행중인 프로젝트에 배경음 삽입기능이 추가되었다. 음원파일 업로드 또는 youtube url등록이 다 가능해야 하는기능. audio 태그와 YouTube API를 같이 사용하기 위한 플레이어를 만들기로 한다. 1. HTML과 CSS로 오디오 플레이어 형태 만들기 2. 각각의 버튼을 만들어 파일 업로드 및 url등록이 가능하게 만들기 3. 음원 업로드시 audio태그를 생성 4. youtube url등록시 API이용하여 iframe생성 작업단계의 큰 틀만 보자면 저렇게 4단계이다. 그래서 만들어진 오디오 플레이어는 아래와 같다. 기본적으로 표기되는 배경음의 속성은 - 재생상태 - 제목 - 재생시간 - 볼륨 이며 새로 링크를 삽입하거나 음원을 업로드하면 플레이어를 아래처럼 초기화 시켰다가 플레이어를.. 2020. 8. 4. [jQuery + HTML + CSS] 오디오 플레이어 만들기 - 0. 1. HTML로 오디오 태그 만들기 2. 음원 파일 업로드 : input file로 파일 선택 - 확장자 필터링 : form 전송으로 파일 업로드 : 업로드 후 오디오 태그 삽입하여 재생 3. Youtube API로 동영상 적용하기 : 유튜브 URL 입력 - 공유 URL 또는 주소창 URL : URL에서 영상 ID 추출 - 정규식 : API사용하여 iframe적용하여 재생 4. 공통 적용 사항 : 제목 출력 : 음악 재생시 재생시간 초기화 (재생초, 종료시간) : 음악 재생시 소리 70으로 초기화 : 볼륨조절 (음소거) : 재생, 일시정지 2020. 7. 27. [Tool] 협업앱, 메모앱, 노트앱 노션 - Notion 다양한 템플릿제공으로 개인적으로 업무내용 정리, 여행일정 정리, 회의내용 정리 등등 어느 것으로보나 에버노트보다 편리했다. 무료로 쓸 수 있는 페이지갯수에 제한이 있지만 아직 그정도로 많은 페이지를 소비하지 못했다. 완성된 페이지는 URL공유를 할 수 있으며 HTML, PDF로 내보내기 할 수 있다. 아래는 노션으로 만든 한글 가이드이다. 노션 한글 가이드 https://www.notion.so/Notion-1ad7ccbc41a44298814a4820d4acb14e Notion 가이드 성원에 힘입어 한글판 노션 가이드 책이 출판되었습니다. 감사합니다. (_ _) www.notion.so 2020. 2. 2. 이전 1 2 3 다음 반응형