Built-in <html-speaker> button style
In order to use the built-in button styles, you need to include this.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/html-speaker.min.css" rel="stylesheet">.speaker-standard and .speaker-rounded
<html-speaker for="content" class="speaker speaker-standard" data-start="PLAY" data-pause="PAUSE"></html-speaker>
<html-speaker for="content" class="speaker speaker-rounded" data-start="PLAY" data-pause="PAUSE"></html-speaker>
<p id="content">
These two were built-in button styles enjoy!
</p>
These two were built-in button styles enjoy!
Bootstrap Button Style
You may use Bootstrap button style on HTML-Speaker button.
.btn .btn-primary .btn-primary .btn-secondary .btn-success, etc... Learn more: https://getbootstrap.com/docs/4.3/components/buttons/
<html-speaker for="content-bootstrap" class="btn btn-primary" data-start="PLAY" data-pause="PAUSE"></html-speaker>
<html-speaker for="content-bootstrap" class="btn btn-outline-danger" data-start="PLAY" data-pause="PAUSE"></html-speaker>
<p id="content-bootstrap">
Bootstrap buttons are beautiful, you can consider using it!
</p>
Bootstrap buttons are beautiful, you can consider using it!
Custom button's start/pause values
You can set these two values to customize button's values.
data-start="" data-pause=""You may use fontawesome icons as the button's start and pause values!
<html-speaker for="content-custom" class="speaker speaker-standard" data-start='<i class="fa fa-play" aria-hidden="true"></i>' data-pause='<i class="fa fa-pause" aria-hidden="true"></i>'></html-speaker>
<html-speaker for="content-custom" class="speaker speaker-rounded" data-start='<i class="fa fa-volume-off" aria-hidden="true"></i>' data-pause='<i class="fa fa-volume-up" aria-hidden="true"></i>'> PLAYER</html-speaker>
<p id="content-custom">
Customize button's start and pause values are awesome! Right?
</p>
Customize button's start and pause values are awesome! Right?