Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <audio id="player" src="http://stream.laut.fm/gvs-querfunk"></audio>
- <div id="playpause">
- <img src="https://cdn1.iconfinder.com/data/icons/material-audio-video/20/play-circle-outline-128.png" width="64" height="64" onclick="playpause(this);"/>
- </div>
- <div id="mute">
- <img src="https://cdn1.iconfinder.com/data/icons/material-audio-video/18/volume-up-128.png" width="64" height="64" onclick="mute(this);"/>
- </div>
- <div id="volume">
- <input type="range" id="volume-bar" min="0" max="1" step="0.1" value="0.2" onchange="volume(this);"/>
- </div>
- <script>
- document.getElementById('player').volume = 0.2;
- function playpause(ob) {
- player = document.getElementById('player');
- if (player.paused) {
- player.load();
- player.play();
- ob.src = 'https://cdn1.iconfinder.com/data/icons/material-audio-video/20/pause-circle-outline-64.png';
- }
- else {
- player.pause();
- ob.src = 'https://cdn1.iconfinder.com/data/icons/material-audio-video/20/play-circle-outline-128.png'; }
- }
- function mute(ob) {
- if (player.muted) {
- document.getElementById('player').volume = 0.2;
- player.muted = 0;
- ob.src = 'https://cdn1.iconfinder.com/data/icons/material-audio-video/18/volume-up-128.png';
- }
- else {
- player.muted = 1;
- ob.src = 'https://cdn1.iconfinder.com/data/icons/material-audio-video/19/volume-off-128.png'; }
- }
- function volume(ob) {
- document.getElementById('player').volume = document.getElementById('volume-bar').value;
- }
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement