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> |
