Demo | Listen button widget

Usage:


      <script src="../dist/widget.js"></script>

Button default

Source code:


      <div class="listen-button-widget" data-src="https://storage.carrierx.com/c/f1f0f514-d5b8-4ed1-8ba1-7e30068671f4/santa_welcome.mp3"></div>

Button with custom text

Source code:


      <div class="listen-button-widget" data-src="http://www.noiseaddicts.com/samples_1w72b820/37.mp3" data-text="Give me number!"></div>

Button with custom style

Source code:


      <div class="listen-button-widget customized" data-src="http://www.noiseaddicts.com/samples_1w72b820/2514.mp3" data-text="Fancy"></div>
      


      <style>

          .listen-button-widget.customized .lbw-listen-button {

              background-color: #17b517;

          }

          .listen-button-widget.customized .lbw-phone-number {

              color: #5586f5;

          }

          .listen-button-widget.customized .lbw-spinner > div {

              background-color: #5586f5;

          }

      </style>

Programmatic use with custom selector and config (optional)

Source code:


      <div class="my-custom-container"></div>

        <script>

          window.onload = function() {

            window.ListenButtonWidget.init('.my-custom-container',

              src: 'https://storage.carrierx.com/c/f1f0f514-d5b8-4ed1-8ba1-7e30068671f4/santa_welcome.mp3',

              text: 'I\'m a programmer'

            });

          }

        </script>