MP3プレイヤーにプログレスバーを付けて、再生時間の表示を付けたい

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8" />
5  <title>sample</title>
6</head>
7<body>
8  <button onclick="play()" id="play" style="color: blue;">PLAY▷</button>
9  <button onclick="stop()" style="color: red;">■</button>
10  <button onclick="pause()" style="color: orange;">||</button>
11  <input type="range" id="volume" value="50" min="0" max="99">
12  <script language="javascript" type="text/javascript">
13      var music = new Audio();
14
15      var volume = document.getElementById('volume');
16
17      volume.addEventListener('change', function () {
18        var volumeValue = (volume.value.length == 1) ? '0.0' + volume.value : '0.' + volume.value;
19        music.volume = volumeValue;
20       }, false);
21
22      function init() {
23        music.preload = "none";
24        music.src = "./mysong.mp3";
25        music.load();
26
27        music.addEventListener("ended", function () {
28          music.currentTime = 0;
29          music.play();
30        }, false);
31      }
32
33      function play() {
34        music.loop = true;
35        music.play();
36      }
37
38      function stop() {
39        music.pause();
40        music.currentTime = 0;
41      }
42
43      function pause() {
44        music.pause();
45      }
46
47
48      init();
49  </script>
50</body>
51</html>
52