본문 바로가기

jQuery, CSS, HTML4

[jQuery + HTML + CSS] 오디오 플레이어 만들기 - 2 * 목차 * 1. youtube 링크 삽입 화면 2. 음원파일 삽입 화면 3. Youtube API 4. 오디오 플레이어 관련 js 함수 먼저 관리자 등록화면에 대해 설명하도록 하겠다. 관리자 화면에서는 음원과 유튜브 링크를 등록할 수 있다. 오디오 플레이어에 마우스 오버하면 생기는 툴박스에 등록 버튼이 생기도록 하였다. 재생이 시작되면 반복 재생되도록 설정 해놓았다. 1. youtube 링크 삽입 링크삽입 버튼을 클릭하면 youtube url을 삽입하는 팝업이 뜬다. youtube 영상의 주소창에 있는 url 또는 공유 url 삽입이 가능하다. 적용하기 버튼을 클릭하면 팝업창이 닫히고 오디오 플레이어에 동영상 제목이 삽입되고 재생시간이 표기된다. 볼륨은 70으로 셋팅. 재생버튼을 클릭하면 재생시간이 시.. 2020. 8. 12.
[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.