AudiPlay - HTML5 Audio Player
AudiPlay Integration - Free HTML5 Audio Player
AudiPlay - HTML5 Audio Player
AudiPlay Integration - Free HTML5 Audio Player
AudiPlay version 2 with multiple audio support <3 :- Documentation | GitHub Repo Want the Old Version :- https://github.com/SH20RAJ/AudiPlay/tree/old
See
- GitHub - https://github.com/SH20RAJ/AudiPlay
- Codepen - https://codepen.io/SH20RAJ/pen/YzMpONX?editors=0011
- Dev.to - https://dev.to/sh20raj/audiplay-custom-html5-audio-player-17ie
Integration Article
https://codexdindia.blogspot.com/2021/02/audiplay-integration-free-html5-audio.html
Steps To Integrate
Step 1: Use class="audioplay" in Your Audio Tag
<audio controls class="audioplay">
<source src="https://cdn.jsdelivr.net/gh/sh20raj/AudiPlay/Ark.mp3" type="audio/mp3">
</audio>
<!-- Here is the Audio Tag Library -->
Step 2: Add JavaScript CDN Just Before </body> Tag
<script src="https://cdn.jsdelivr.net/gh/sh20raj/AudiPlay/audiplay.min.js"></script>
<!-- Here is the JavaScript Library -->
Optional: Use Style Attribute for Responsive Audio Player
You can use the style attribute in your Audio tag for a responsive audio player.
<audio controls class="audioplay" style="width: 700px;">
<source src…AudiPlay version 2 with multiple audio support <3 :- Documentation | GitHub Repo
See GitHub
https://github.com/SH20RAJ/AudiPlay
Integration Article
https://codexdindia.blogspot.com/2021/02/audiplay-integration-free-html5-audio.html
Steps To Integrate
Step 1: Use class="audioplay" in Your Audio Tag
<audio controls class="audioplay">
<source src="https://cdn.jsdelivr.net/gh/sh20raj/AudiPlay/Ark.mp3" type="audio/mp3">
</audio>
<!-- Here is the Audio Tag Library -->
Step 2: Add JavaScript CDN Just Before </body> Tag
<script src="https://cdn.jsdelivr.net/gh/sh20raj/AudiPlay/audiplay.min.js"></script>
<!-- Here is the JavaScript Library -->
Optional: Use Style Attribute for Responsive Audio Player
You can use the style attribute in your Audio tag for a responsive audio player.
<audio controls class="audioplay" style="width: 700px;">
<source src="Ark.mp3" type="audio/mp3">
</audio>
Additional Features
Disable Download Button
Add nodownload attribute to your Audio Tag to disable the Download Button.
Example:
<audio controls class="audioplay" nodownload>
<source src="Ark.mp3" type="audio/mp3">
</audio>
Preview
Before Adding AudiPlay
After Adding AudiPlay
After Disabling Download with nodownload Attribute
Full HTML Example
<audio controls class="audioplay" style="width: 700px;">
<source src="Ark.mp3" type="audio/mp3">
</audio>
<script src="https://cdn.jsdelivr.net/gh/sh20raj/AudiPlay/audiplay.min.js"></script>
License
This project is licensed under the MIT License.
Feel free to modify this Project as needed for your project!
Top comments (0)