fbpx

AudiPlay : Custom HTML5 Audio Player

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 model 2 with a number of audio help <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">
    <supply src="https://cdn.jsdelivr.internet/gh/sh20raj/AudiPlay/Ark.mp3" sort="audio/mp3">
</audio>
<!-- Here is the Audio Tag Library -->

Step 2: Add JavaScript CDN Just Before </physique> Tag

<script src="https://cdn.jsdelivr.internet/gh/sh20raj/AudiPlay/audiplay.min.js"></script>
<!-- Here is the JavaScript Library -->

Optional: Use Style Attribute for Responsive Audio Player

You can use the fashion attribute in your Audio tag for a responsive audio participant.

<audio controls class="audioplay" fashion="width: 700px;">
    <supply src="Ark.mp3" sort="audio/mp3">
</audio>

Additional Features

AudiPlay model 2 with a number of audio help <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">
    <supply src="https://cdn.jsdelivr.internet/gh/sh20raj/AudiPlay/Ark.mp3" sort="audio/mp3">
</audio>
<!-- Here is the Audio Tag Library -->

Step 2: Add JavaScript CDN Just Before </physique> Tag

<script src="https://cdn.jsdelivr.internet/gh/sh20raj/AudiPlay/audiplay.min.js"></script>
<!-- Here is the JavaScript Library -->

Optional: Use Style Attribute for Responsive Audio Player

You can use the fashion attribute in your Audio tag for a responsive audio participant.

<audio controls class="audioplay" fashion="width: 700px;">
    <supply src="Ark.mp3" sort="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>
    <supply src="Ark.mp3" sort="audio/mp3">
</audio>

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" fashion="width: 700px;">
    <supply src="Ark.mp3" sort="audio/mp3">
</audio>

<script src="https://cdn.jsdelivr.internet/gh/sh20raj/AudiPlay/audiplay.min.js"></script>

License

This challenge is licensed below the MIT License.

Feel free to switch this README as wanted to your challenge!

HI-FI News

through DEV Community https://dev.to

March 17, 2024 at 06:05PM

Privacy Preference Center

Necessary

This cookie is set by Google Analytics. It stores and update a unique value for each page visited and is used to count and track pageviews.

_gid , _ga

Advertising

Used by Meta to deliver a series of advertisement products such as real time bidding from third-party advertisers

_fbp

Analytics

This cookie is set by Google Analytics. It stores and updates a unique value for each page visited and is used to count and track pageviews.

_gid , _ga

Other

Tracks when someone clicks through a Klaviyo email to your website

__kla_id

Select your currency