audiplay's Introduction

AudiPlay - HTML5 Audio Player

AudiPlay Integration - Free HTML5 Audio Player

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="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.

AudiPlay version 2 with multiple audio support <3 :- Documentation | GitHub Repo Want the Old Version :- https://github.com/SH20RAJ/AudiPlay/tree/old or Use it from Themes - https://github.com/SH20RAJ/AudiPlay/tree/main/themes/old

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

audiplay's People

Contributors

Stargazers

Watchers

audiplay's Issues

Doesn't work when audio element is created after page load

I am creating audio element after page load using jquery and then appending to body. At that time it doesn't seem to work.
<audio controls class="audiplay vam" nodownload> <source src="' . $trackSource . '" type="audio/mp3" /> </audio>

multiple audio tags on the same page

hi , i was wondering if you can help me with this error , if i added more than 1 audio tag it works pretty fine with the first one and the rest audio tags stay the same and nothing happen , also they all have the same class name , tyvm

Recommend Projects