@techiepi/green-audio-player
Version:
Green Audio Player
75 lines (69 loc) • 2.38 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Green Audio Player</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../dist/css/green-audio-player.css">
<style>
html, body { height: 100%; }
body {
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #F8FFAE;
background: -webkit-linear-gradient(-65deg, #43C6AC, #F8FFAE);
background: linear-gradient(-65deg, #43C6AC, #F8FFAE);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ready-player-1, .ready-player-2, .ready-player-3, .ready-player-4 {
margin: 24px 0;
}
</style>
</head>
<body>
<div class="ready-player-1 player">
<audio crossorigin>
<source src="audio/example-1.mp3" type="audio/mpeg">
</audio>
</div>
<div class="ready-player-2 player">
<audio crossorigin>
<source src="audio/example-2.mp3" type="audio/mpeg">
</audio>
</div>
<div class="ready-player-3 player-with-download">
<audio crossorigin>
<source src="audio/example-2.mp3" type="audio/mpeg">
</audio>
</div>
<div class="ready-player-4 player-with-accessibility">
<audio crossorigin>
<source src="audio/example-2.mp3" type="audio/mpeg">
</audio>
</div>
<script src="../dist/js/green-audio-player.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
GreenAudioPlayer.init({
selector: '.player',
stopOthersOnPlay: true
});
GreenAudioPlayer.init({
selector: '.player-with-download',
stopOthersOnPlay: true,
showDownloadButton: true,
enableKeystrokes: true
});
GreenAudioPlayer.init({
selector: '.player-with-accessibility',
stopOthersOnPlay: true,
enableKeystrokes: true
});
});
</script>
</body>
</html>