-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
62 lines (55 loc) · 2.39 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Audio Playlist Web Component</title>
<script type="module">
import Hls from "https://cdn.skypack.dev/hls.js"
window.Hls = Hls
console.log(Hls)
// Use this for deployments.
import "./dist/components.module.js"
// Use this for local dev for fast feedback loop
// import "./src"
</script>
</head>
<body>
<div style="margin: 10rem 0;"></div>
<style>
audio-playlist::part(volume-slider) {
/*
--thumb-background: red;
--thumb-size: 16px;
--track-width: 16px;
--track-height: 6rem;
--track-color: blue;
*/
}
</style>
<div> Regular Audio Player </div>
<audio-playlist controls>
<audio artist="My Artist" poster="https://via.placeholder.com/512x512" title="Bit Bit" src="https://freepd.com/music/Bit%20Bit%20Loop.mp3"></audio>
<audio title="Fireworks">
<source src="https://freepd.com/music/Fireworks.mp3">
</audio>
<audio title="Chronos" src="https://freepd.com/music/Chronos.mp3"></audio>
<audio title="Space Ambience" src="https://freepd.com/music/Space%20Ambience.mp3"></audio>
</audio-playlist>
<!-- dont render a ui without "controls" attribute" -->
<audio-playlist>
<audio title="Bit Bit" src="https://freepd.com/music/Bit%20Bit%20Loop.mp3"></audio>
<audio title="Fireworks">
<source src="https://freepd.com/music/Fireworks.mp3">
</audio>
<audio title="Chronos" src="https://freepd.com/music/Chronos.mp3"></audio>
<audio title="Space Ambience" src="https://freepd.com/music/Space%20Ambience.mp3"></audio>
</audio-playlist>
<br>
<div> HLS Audio Player </div>
<audio-playlist controls hls>
<audio src="https://multiplatform-f.akamaihd.net/i/multi/april11/sintel/sintel-hd_,512x288_450_b,640x360_700_b,768x432_1000_b,1024x576_1400_m,.mp4.csmil/master.m3u8" title="Sintel" preload="none"></audio>
<audio src="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8" title="Unknown" preload="none"></audio>
<audio src="https://multiplatform-f.akamaihd.net/i/multi/will/bunny/big_buck_bunny_,640x360_400,640x360_700,640x360_1000,950x540_1500,.f4v.csmil/master.m3u8" preload="none" title="Big Buck Bunny"></audio>
</audio-playlist>
</body>
</html>