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