그냥 js 파일입니다.

가장 먼저 가로 세로 크기가 똑같은 정사각형 이미지 주소와 mp3주소가 필요합니다.

사용법은 id=mp3Player 라는 div 에 아래처럼 기입하면 플레이어가 완성됩니다.

mp3주소와 이미지주소 사이에 ** 을 넣어줍니다.

div의 스타일은 따로 빼면 안 되고 다이렉트로 주셔야 합니다.

<div id=mp3Player style=width:이미지가로px;height:이미지세로px;background-color:테두리색상;border-width:트랙바폭px;border-color:트랙바색상>
mp3주소**이미지주소
</div>

<script src=js주소></script>

----------

<div id=mp3Player style=width:300px;height:300px;background-color:#eeeeee;border-width:10px;border-color:maroon>
https://blog.kakaocdn.net/dn/cxAIXs/btq5tESk6Ke/NmY7Y2K1CZbYp59y7H7kXK/tfile.mp3**https://blog.kakaocdn.net/dn/csNF5B/btq5pYkd9Pz/YD7i3AbUQBoeLhfItXhdK0/img.jpg
</div>
<script src=https://blog.kakaocdn.net/dn/kBpAs/btq5sSjuYui/RGujzkc3kXGgHUkJOslCFk/tfile.js></script>

기본은 원형입니다만 4각형부터 8각형까지가 가능합니다. 이미지주소 뒤에 **5 만 붙여주세요.

<div id=mp3Player style=width:이미지가로px;height:이미지세로px;background-color:테두리색상;border-width:트랙바폭px;border-color:트랙바색상>
mp3주소**이미지주소**5
</div>

<script src=js주소></script>

----------

<div id=mp3Player style=width:300px;height:300px;background-color:#eeeeee;border-width:10px;border-color:maroon>
https://blog.kakaocdn.net/dn/cxAIXs/btq5tESk6Ke/NmY7Y2K1CZbYp59y7H7kXK/tfile.mp3**https://blog.kakaocdn.net/dn/csNF5B/btq5pYkd9Pz/YD7i3AbUQBoeLhfItXhdK0/img.jpg**5
</div>
<script src=https://blog.kakaocdn.net/dn/kBpAs/btq5sSjuYui/RGujzkc3kXGgHUkJOslCFk/tfile.js></script>

타이머는 아래처럼 붙입니다.

<div id=mp3Player style=width:이미지가로px;height:이미지세로px;background-color:테두리색상;border-width:트랙바폭px;border-color:트랙바색상>
mp3주소**이미지주소
</div>
<span id=currentTimer>00:00</span>
<span id=totalTimer>00:00</span>

<script src=js주소></script>

----------

<div id=mp3Player style=width:300px;height:300px;background-color:#eeeeee;border-width:10px;border-color:maroon>
https://blog.kakaocdn.net/dn/cxAIXs/btq5tESk6Ke/NmY7Y2K1CZbYp59y7H7kXK/tfile.mp3**https://blog.kakaocdn.net/dn/csNF5B/btq5pYkd9Pz/YD7i3AbUQBoeLhfItXhdK0/img.jpg
</div>
<span id=currentTimer>00:00</span>
<span id=totalTimer>00:00</span>
<script src=https://blog.kakaocdn.net/dn/kBpAs/btq5sSjuYui/RGujzkc3kXGgHUkJOslCFk/tfile.js></script>

마지막으로 제가 타이머에 css 를 주어서 꾸미기를 해본 소스입니다.

<style>
.timer { position:absolute; color:#ffffff; font-size:12pt; font-family:georgia; margin-top:-150px; }
</style>
<div id=mp3Player style=width:300px;height:300px;background-color:#eeeeee;border-width:10px;border-color:maroon>
https://blog.kakaocdn.net/dn/cxAIXs/btq5tESk6Ke/NmY7Y2K1CZbYp59y7H7kXK/tfile.mp3**https://blog.kakaocdn.net/dn/csNF5B/btq5pYkd9Pz/YD7i3AbUQBoeLhfItXhdK0/img.jpg
</div>
<span id=currentTimer class=timer style=margin-left:70px>00:00</span>
<span id=totalTimer  class=timer style=margin-left:205px>00:00</span>
<script>
mp3Player.onmouseover = function() {
    currentTimer.style.display = totalTimer.style.display = 'block';
}
mp3Player.onmouseout = function() {
    currentTimer.style.display = totalTimer.style.display = 'none';
}
</script>
<script src=https://blog.kakaocdn.net/dn/kBpAs/btq5sSjuYui/RGujzkc3kXGgHUkJOslCFk/tfile.js></script>

위 소스를 https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default 에서 확인해 보세요.

크롬의 경우 미디어의 자동재생을 막아 놓아서 그냥 수동재생 소스로 짰습니다.

플레이어의 크기는 예를 들어 이미지 사이즈가 300픽셀이면 여기에 테두리 두께까지가 포함됩니다.

예제의 경우는 이미지 사이즈가 300픽셀이라 플레이어는 가로 세로 모두 320픽셀입니다.

예제보기 - http://www.mediaplayer.kr/main/tip/20