SHOW:
|
|
- or go back to the newest paste.
1 | <audio id="player" src="http://stream.laut.fm/gvs-querfunk"></audio> | |
2 | <div id="playpause"> | |
3 | <img src="https://cdn1.iconfinder.com/data/icons/material-audio-video/20/play-circle-outline-128.png" width="64" height="64" onclick="playpause(this);"/> | |
4 | </div> | |
5 | <div id="mute"> | |
6 | <img src="https://cdn1.iconfinder.com/data/icons/material-audio-video/18/volume-up-128.png" width="64" height="64" onclick="mute(this);"/> | |
7 | </div> | |
8 | <div id="volume"> | |
9 | <input type="range" id="volume-bar" min="0" max="1" step="0.1" value="0.2" onchange="volume(this);"/> | |
10 | </div> | |
11 | <script> | |
12 | document.getElementById('player').volume = 0.2; | |
13 | function playpause(ob) { | |
14 | player = document.getElementById('player'); | |
15 | if (player.paused) { | |
16 | player.load(); | |
17 | player.play(); | |
18 | ob.src = 'https://cdn1.iconfinder.com/data/icons/material-audio-video/20/pause-circle-outline-64.png'; | |
19 | } | |
20 | else { | |
21 | player.pause(); | |
22 | ob.src = 'https://cdn1.iconfinder.com/data/icons/material-audio-video/20/play-circle-outline-128.png'; } | |
23 | } | |
24 | ||
25 | function mute(ob) { | |
26 | if (player.muted) { | |
27 | - | player.volume = 1; |
27 | + | document.getElementById('player').volume = 0.2; |
28 | player.muted = 0; | |
29 | ob.src = 'https://cdn1.iconfinder.com/data/icons/material-audio-video/18/volume-up-128.png'; | |
30 | } | |
31 | else { | |
32 | player.muted = 1; | |
33 | ob.src = 'https://cdn1.iconfinder.com/data/icons/material-audio-video/19/volume-off-128.png'; } | |
34 | } | |
35 | ||
36 | function volume(ob) { | |
37 | document.getElementById('player').volume = document.getElementById('volume-bar').value; | |
38 | } | |
39 | </script> |