-
Notifications
You must be signed in to change notification settings - Fork 9
/
index.html
89 lines (60 loc) · 24.4 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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audiplay - Free HTML5 Audio Player</title>
<link rel="shortcut icon" href="logo.png" type="image/x-icon"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/CDNSFree2/PrismJS@latest/prism.min.css">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body class="container">
<audio controls class="audiplay" >
<source src="Ark.mp3" type="audio/mp3">
</audio>
<div class='post'>
<div style="text-align: center;"><iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/L5gFnaTItmE" width="560"></iframe></div>
<p><span style="font-size: medium;"> </span></p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-_pNGRfKhrOY/YDEmYVlt9dI/AAAAAAAAAjs/ev6XuuMm8xo9CD3_bOC74Wl5L7kueNnQACLcBGAsYHQ/s256/logo.png" style="margin-left: auto; margin-right: auto;"><span style="font-size: medium;"><img border="0" data-original-height="256" data-original-width="256" src="https://1.bp.blogspot.com/-_pNGRfKhrOY/YDEmYVlt9dI/AAAAAAAAAjs/ev6XuuMm8xo9CD3_bOC74Wl5L7kueNnQACLcBGAsYHQ/s0/logo.png" /></span></a></td></tr><tr><td class="tr-caption" style="text-align: center;"><span style="font-size: medium;">AudiPlay - HTML5 Audio Player</span></td></tr></tbody></table><span style="font-size: medium;"><br /></span><p></p><p style="text-align: center;"><span style="font-size: x-large;">AudiPlay Integration - Free HTML5 Audio Player</span></p>
<span style="font-size: medium;"><br /></span><div style="text-align: center;"></div><div style="text-align: center;"><span style="font-size: medium;"><br /></span></div><div style="text-align: center;"><span style="font-size: medium;"><br /></span></div><div style="text-align: center;"><span style="font-size: large;">See GitHub :- <span color="rgba(0, 0, 0, 0.87)" face="Roboto, Noto, sans-serif" style="white-space: pre-wrap;"><a href="https://github.com/SH20RAJ/AudiPlay">https://github.com/SH20RAJ/AudiPlay</a></span></span></div><span style="font-size: medium;"><br />
<audio class="audiplay" style="width: 100%;">
<source src="https://cdn.jsdelivr.net/gh/sh20raj/AudiPlay/Ark.mp3" type="audio/mp3"></source>
</audio>
<script src="https://cdn.jsdelivr.net/gh/sh20raj/AudiPlay/audiplay.min.js"></script>
<br /><br />
</span><p style="text-align: center;"><span style="font-size: medium;"><br /></span></p><p style="text-align: center;"><span style="font-size: large;">Steps To Integrate</span></p><p><span style="font-size: medium;"><span> Step 1 :- </span>Use <span style="background-color: #1e1e1e; color: #9cdcfe; font-family: Consolas, "Courier New", monospace; white-space: pre;">class</span><span style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; white-space: pre;">=</span><span style="background-color: #1e1e1e; color: #ce9178; font-family: Consolas, "Courier New", monospace; white-space: pre;">"audiplay"</span> in Your Audio Tag .</span></p><p><span style="font-size: medium;"><br /></span></p><div class="block section ng-scope" data-pos="1" ng-if="is_sidebar === undefined || is_sidebar == !!section.sidebar" ng-repeat="(k, section) in sections" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; color: #474a54; font-family: "Open Sans", sans-serif; margin: 0px 0px 20px; outline: 0px; padding: 0px; position: relative; vertical-align: baseline;"><div ng-switch="section.type" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><div class="ng-scope" ng-switch-when="code" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><div class="block-code block-show-code ng-isolate-scope ng-valid" ng-model="section.data" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border-radius: 3px; border: 0px; box-sizing: border-box; margin: 0px 0px 20px; outline: 0px; padding: 3px; vertical-align: baseline;" type="section.type"><div class="code-tabs" style="background: 0px 0px white; border: 0px; box-sizing: border-box; margin: -1px 0px 0px; outline: 0px; padding: 0px; position: relative; vertical-align: baseline; z-index: 10;"><div class="ng-scope tab on" ng-class="{tab: true, on:$index==current, off:$index!=current}" ng-repeat="tab in data.codes track by $id($index)" style="background: 0px 0px; border: 0px; box-sizing: border-box; color: #bbbbbb; display: inline-block; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="ng-binding ng-scope" ng-if="!tab.status" style="background: 0px 0px; border: 0px; box-sizing: border-box; color: #ce2025; display: inline-block; font-weight: 700; margin: 0px; outline: 0px; padding: 2px 5px 5px; vertical-align: baseline;"><span style="font-size: medium;">HERE IS THE AUDIO TAG</span></span></div></div></div></div></div></div><p><span style="font-size: medium;"><span><span>
</span></span></span></p>
<pre>
<code class="language-html">
<audio controls class="audiplay" >
<source
src="https://cdn.jsdelivr.net/gh/sh20raj/AudiPlay/Ark.mp3"
type="audio/mp3"/>
</audio>
<!--Here is the Audio Tag Library-->
</code>
</pre>
<span style="font-size: medium;"><span><span>
</span></span></span><p></p><p><span style="font-size: medium;"><span><span><br /></span></span></span></p><p><span style="font-size: medium;"><span><span>Step 2 :- Add Javascript CDN Just Before </span></span><span style="color: grey; font-family: Consolas, "Courier New", monospace; white-space: pre;"></</span><span style="color: #569cd6; font-family: Consolas, "Courier New", monospace; white-space: pre;">body</span><span style="color: grey; font-family: Consolas, "Courier New", monospace; white-space: pre;">> </span>Tag</span></p><p><span style="font-size: medium;"><br /></span></p><div class="block section ng-scope" data-pos="1" ng-if="is_sidebar === undefined || is_sidebar == !!section.sidebar" ng-repeat="(k, section) in sections" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; color: #474a54; font-family: "Open Sans", sans-serif; margin: 0px 0px 20px; outline: 0px; padding: 0px; position: relative; vertical-align: baseline;"><div ng-switch="section.type" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><div class="ng-scope" ng-switch-when="code" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><div class="block-code block-show-code ng-isolate-scope ng-valid" ng-model="section.data" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border-radius: 3px; border: 0px; box-sizing: border-box; margin: 0px 0px 20px; outline: 0px; padding: 3px; vertical-align: baseline;" type="section.type"><div class="code-tabs" style="background: 0px 0px white; border: 0px; box-sizing: border-box; margin: -1px 0px 0px; outline: 0px; padding: 0px; position: relative; vertical-align: baseline; z-index: 10;"><div class="ng-scope tab on" ng-class="{tab: true, on:$index==current, off:$index!=current}" ng-repeat="tab in data.codes track by $id($index)" style="background: 0px 0px; border: 0px; box-sizing: border-box; color: #bbbbbb; display: inline-block; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="ng-binding ng-scope" ng-if="!tab.status" style="background: 0px 0px; border: 0px; box-sizing: border-box; color: #ce2025; display: inline-block; font-weight: 700; margin: 0px; outline: 0px; padding: 2px 5px 5px; vertical-align: baseline;"><span style="font-size: medium;">HERE IS THE JAVASCRIPT CDN</span></span></div></div></div></div></div></div>
<pre><code class="language-html">
<script src="https://cdn.jsdelivr.net/gh/sh20raj/AudiPlay/audiplay.min.js"></script>
<!--Here is the JavaScript Library-->
</code>
</pre>
<p><span style="font-size: medium;"><br /></span></p><p><span style="font-size: medium;">You can also Use Style Attribute in your Audio Tag i.e. -: <span style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; white-space: pre;"> </span><span style="background-color: #1e1e1e; color: #9cdcfe; font-family: Consolas, "Courier New", monospace; white-space: pre;">style</span><span style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; white-space: pre;">=</span><span style="background-color: #1e1e1e; color: #ce9178; font-family: Consolas, "Courier New", monospace; white-space: pre;">"</span><span style="background-color: #1e1e1e; color: #ce9178; font-family: Consolas, "Courier New", monospace; white-space: pre;">width: 700px;</span><span style="background-color: #1e1e1e; color: #ce9178; font-family: Consolas, "Courier New", monospace; white-space: pre;">"</span> and You Will Get Responsive Audio Player .</span></p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-az7XMaTr12Y/YDEsxAKNOAI/AAAAAAAAAj4/3np_RXRA3-gC9OQaLN-L73dPij8mEubUACLcBGAsYHQ/s893/Before%2BAdding%2BAudiPlayer.PNG" style="margin-left: auto; margin-right: auto;"><span style="font-size: medium;"><img border="0" data-original-height="183" data-original-width="893" height="132" src="https://1.bp.blogspot.com/-az7XMaTr12Y/YDEsxAKNOAI/AAAAAAAAAj4/3np_RXRA3-gC9OQaLN-L73dPij8mEubUACLcBGAsYHQ/w640-h132/Before%2BAdding%2BAudiPlayer.PNG" width="640" /></span></a></td></tr><tr><td class="tr-caption" style="text-align: center;"><span style="font-size: medium;">Before Adding AudiPlay - Free HTML5 Audio Player</span></td></tr></tbody></table><span style="font-size: medium;"><br /><br /><br /><br /><br /></span><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-Z_cISx35hIY/YDEsyM0PtII/AAAAAAAAAj8/_KuMVOonOzUSqIeJvpFR-dTeajhTZ5WAQCLcBGAsYHQ/s846/After%2BAdding%2BAudiPlayer.PNG" style="margin-left: auto; margin-right: auto;"><span style="font-size: medium;"><img border="0" data-original-height="135" data-original-width="846" height="102" src="https://1.bp.blogspot.com/-Z_cISx35hIY/YDEsyM0PtII/AAAAAAAAAj8/_KuMVOonOzUSqIeJvpFR-dTeajhTZ5WAQCLcBGAsYHQ/w640-h102/After%2BAdding%2BAudiPlayer.PNG" width="640" /></span></a></td></tr><tr><td class="tr-caption" style="text-align: center;"><span style="font-size: medium;">After Adding AudiPlay - Free HTML5 Audio Player</span></td></tr></tbody></table><span style="font-size: medium;"><br /></span><p><span style="font-size: medium;"><br /></span></p><p style="text-align: center;"><span style="font-size: medium;">What You Can Do </span></p><p><span style="font-size: medium;">Add <span style="background-color: #1e1e1e; color: #9cdcfe; font-family: Consolas, "Courier New", monospace; white-space: pre;">nodownload</span> Attribute to Your Audio Tag To <b>disable the Download Button .</b></span></p><p><span style="font-size: medium;"><b><br /></b></span></p><p><span style="font-size: medium;"><b><br /></b></span></p><p><b><span style="font-size: medium;">Like This -</span></b></p><div class="block section ng-scope" data-pos="1" ng-if="is_sidebar === undefined || is_sidebar == !!section.sidebar" ng-repeat="(k, section) in sections" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; color: #474a54; font-family: "Open Sans", sans-serif; margin: 0px 0px 20px; outline: 0px; padding: 0px; position: relative; vertical-align: baseline;"><div ng-switch="section.type" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><div class="ng-scope" ng-switch-when="code" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><div class="block-code block-show-code ng-isolate-scope ng-valid" ng-model="section.data" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border-radius: 3px; border: 0px; box-sizing: border-box; margin: 0px 0px 20px; outline: 0px; padding: 3px; vertical-align: baseline;" type="section.type"><div class="code-tabs" style="background: 0px 0px white; border: 0px; box-sizing: border-box; margin: -1px 0px 0px; outline: 0px; padding: 0px; position: relative; vertical-align: baseline; z-index: 10;"><div class="ng-scope tab on" ng-class="{tab: true, on:$index==current, off:$index!=current}" ng-repeat="tab in data.codes track by $id($index)" style="background: 0px 0px; border: 0px; box-sizing: border-box; color: #bbbbbb; display: inline-block; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="ng-binding ng-scope" ng-if="!tab.status" style="background: 0px 0px; border: 0px; box-sizing: border-box; color: #ce2025; display: inline-block; font-weight: 700; margin: 0px; outline: 0px; padding: 2px 5px 5px; vertical-align: baseline;"><span style="font-size: medium;">HERE IS THE AUDIO TAG</span></span></div></div><div class="ng-scope" ng-repeat="tab in data.codes track by $id($index)" ng-show="$index==current" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><pre class="cm-s-neo" data-mode="html" ng-if="data.codes[$index].code != """ style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-shadow: rgb(238, 238, 238) 0px 0px 0px 3px; box-sizing: border-box; color: #4d4d4c; font-family: Monaco, Menlo, Consolas, "courier new", monospace; line-height: 1.42857; margin-bottom: 0px; margin-top: 0px; outline: 0px; overflow-wrap: break-word; overflow: auto; padding: 10px; position: relative; vertical-align: baseline; white-space: pre-wrap; word-break: break-all;"><div style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; line-height: 19px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre;"><div style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; line-height: 19px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><div style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="font-size: medium;"><span style="background: 0px 0px white; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">audio</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">controls</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">class</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"audiplay"</span><span style="color: #d4d4d4;"> <b>nodownload</b></span><span style="color: grey;">></span></span></div><div><span style="font-size: medium;"> <span style="color: grey;"><</span><span style="color: #569cd6;">source</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"Ark.mp3"</span> <span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"audio/mp3"</span><span style="color: grey;">></span></span></div><div><span style="font-size: medium;"> <span style="color: grey;"></</span><span style="color: #569cd6;">audio</span><span style="color: grey;">></span></span></div><div style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="background: 0px 0px white; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="font-size: medium;"> <span style="background: 0px 0px; border: 0px; color: #6a9955; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><!--Here is the Audio Tag Library--></span></span></span></div></div></div></pre></div></div></div></div></div><p><span style="font-size: medium;"><br /></span></p><p><span style="font-size: medium;"><br /></span></p><p><span style="font-size: medium;">Now You Will Get -</span></p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-E3teJdXvoVI/YDEt_6Z9QEI/AAAAAAAAAkM/9LZVcPD12Hg3bzAlbDl-W_XcIetE44yPACLcBGAsYHQ/s582/After%2BDisableing%2BDownload%2Busing%2Bnodownload%2BAttribute.PNG" style="margin-left: auto; margin-right: auto;"><span style="font-size: medium;"><img border="0" data-original-height="137" data-original-width="582" height="123" src="https://1.bp.blogspot.com/-E3teJdXvoVI/YDEt_6Z9QEI/AAAAAAAAAkM/9LZVcPD12Hg3bzAlbDl-W_XcIetE44yPACLcBGAsYHQ/w523-h123/After%2BDisableing%2BDownload%2Busing%2Bnodownload%2BAttribute.PNG" width="523" /></span></a></td></tr><tr><td class="tr-caption" style="text-align: center;"><span style="font-size: medium;">After Disableing Download using nodownload Attribute</span></td></tr></tbody></table><span style="font-size: medium;"><br /></span><p><span style="font-size: medium;"><br /></span></p><p><span style="font-size: medium;"><br /></span></p><p><span style="font-size: medium;">Here how the Total HTML will look like ...</span></p><p><span style="font-size: medium;"><br /></span></p><div class="block section ng-scope" data-pos="1" ng-if="is_sidebar === undefined || is_sidebar == !!section.sidebar" ng-repeat="(k, section) in sections" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; color: #474a54; font-family: "Open Sans", sans-serif; margin: 0px 0px 20px; outline: 0px; padding: 0px; position: relative; vertical-align: baseline;"><div ng-switch="section.type" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><div class="ng-scope" ng-switch-when="code" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><div class="block-code block-show-code ng-isolate-scope ng-valid" ng-model="section.data" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border-radius: 3px; border: 0px; box-sizing: border-box; margin: 0px 0px 20px; outline: 0px; padding: 3px; vertical-align: baseline;" type="section.type"><div class="code-tabs" style="background: 0px 0px white; border: 0px; box-sizing: border-box; margin: -1px 0px 0px; outline: 0px; padding: 0px; position: relative; vertical-align: baseline; z-index: 10;"><div class="ng-scope tab on" ng-class="{tab: true, on:$index==current, off:$index!=current}" ng-repeat="tab in data.codes track by $id($index)" style="background: 0px 0px; border: 0px; box-sizing: border-box; color: #bbbbbb; display: inline-block; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="ng-binding ng-scope" ng-if="!tab.status" style="background: 0px 0px; border: 0px; box-sizing: border-box; color: #ce2025; display: inline-block; font-weight: 700; margin: 0px; outline: 0px; padding: 2px 5px 5px; vertical-align: baseline;"><span style="font-size: medium;">HERE IS THE FULL HTML EXAMPLE</span></span></div></div></div></div></div></div><p>
<pre><code class="language-html">
<audio controls class="audiplay" style="width: 700px;">
<source src="Ark.mp3" type="audio/mp3">
</audio>
<script src="https://cdn.jsdelivr.net/gh/sh20raj/AudiPlay/audiplay.min.js"></script>
</code>
</pre>
</p><p><br /></p>
</div>
<style>
.ap_container {position:fixed;width:100%;bottom:0px ;left:0px;}
</style>
<script src="audiplay.js"></script>
<script src="https://cdn.jsdelivr.net/gh/CDNSFree2/PrismJS@latest/prism.min.js"></script>
</body>
</html>