DEV Community

Sh Raj
Sh Raj

Posted on

AudiPlay : Custom HTML5 Audio Player

AudiPlay - HTML5 Audio Player

AudiPlay Integration - Free HTML5 Audio Player



GitHub logo SH20RAJ / AudiPlay

AudiPlay - A 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

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 -->
Enter fullscreen mode Exit fullscreen mode

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 -->
Enter fullscreen mode Exit fullscreen mode

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
…
Enter fullscreen mode Exit fullscreen mode

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 -->
Enter fullscreen mode Exit fullscreen mode

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 -->
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Preview

Before Adding AudiPlay

Before Adding AudiPlay

After Adding AudiPlay

After Adding AudiPlay

After Disabling Download with nodownload Attribute

After Disabling Download


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>
Enter fullscreen mode Exit fullscreen mode

License

This project is licensed under the MIT License.


Feel free to modify this Project as needed for your project!

Top comments (0)