Videogular - Jacaranda FM Audio Player

index.html

<div ng-app="myApp">
<div ng-controller="HomeCtrl as controller" class="videogular-container">
	<videogular vg-theme="controller.config.theme.url" class="videogular-container audio">
		<vg-media vg-src="controller.config.sources" vg-type="audio"></vg-media>

		<vg-controls>
			<vg-play-pause-button></vg-play-pause-button>
			<vg-time-display>{{ currentTime | date:'mm:ss':'+0000' }}</vg-time-display>
			<vg-scrub-bar>
				<vg-scrub-bar-current-time></vg-scrub-bar-current-time>
			</vg-scrub-bar>
			<vg-volume>
				<vg-mute-button></vg-mute-button>
			</vg-volume>
		</vg-controls>
	</videogular>
</div>
</div>

<css-doodle>
  :doodle {
    flex: none;
    @grid: 25x1;
    @size: 1000px 800px;
    overflow: hidden;
  }

  --colors: (#75b9be,#696d7d,#d72638,#f49d37,#140f2d);
  --color-1: @p(--colors);
  --color-2: @P;
  --transform: translateY(@r(2, 90)%);
  --size: 30px;
  transform: var(--transform) rotate(0deg);
  transform-origin: 50% 100%;

  @random(0.5) {
    animation: swing @r(3, 5)s ease infinite alternate both;
  }
  @random(0.5) {
    animation: swingLeft @r(3, 5)s ease infinite alternate both;
  }

  @keyframes swing {
    0% {
      transform: var(--transform) rotate(0deg);
    }
    100% {
      transform: var(--transform) rotate(1deg);
    }
  }

  @keyframes swingLeft {
    0% {
      transform: var(--transform) rotate(0deg);
    }
    100% {
      transform: var(--transform) rotate(-1deg);
    }
  }

  ::after {
    content: "";
    position: absolute;
    top: -15px;
    left: calc(50% - var(--size) / 2);
    width: var(--size);
    height: var(--size);
    background: @p(
      radial-gradient(@stripe(@m4(var(--color-@pn(1, 2))), transparent 29.7%)),
      @doodle(
        @grid: 1 / 100%;
        ::after {
          content: "@p(✿,❁,❀,❃,❊)";
          position: absolute;
          top: -4px;
          left: 50%;
          transform: translate3d(-50%, 0, 0);
          font-size: 40px;
          color: transparent;
          background-image: radial-gradient(var(--color-1) 20%, var(--color-2) calc(20% + 0.5px));
          -webkit-background-clip: text;
        }
      ),
      @doodle(
        @grid: 1 / 100%;
        ::after {
          content: "@p(🌸,🌼)";
          position: absolute;
          top: 0;
          left: 50%;
          transform: translate3d(-50%, 0, 0);
          font-size: 28px;
          color: transparent;
          background-image: radial-gradient(var(--color-1) 20%, var(--color-2) calc(20% + 0.5px));
          -webkit-background-clip: text;
        }
      )
    );
  }

  background: @doodle(
    @grid: 1x40;
    background: linear-gradient(90deg, @stripe(transparent, @p(--colors) 2px, transparent));

    @nth(1, 2) {
      ::before { display: none; }
    }

    @random(.5) {
      ::before {
        content: "";
        @place: 10px center;
        @size: 50% 100%;
        border-radius: 0 100% 0 100%;
        background: @p(--colors);
        -webkit-box-reflect: @p(right, initial);
      }
    }
  );
</css-doodle>
	
<!-- partial -->
<script src='https://cdn.jsdelivr.net/npm/[email protected]/css-doodle.min.js'></script>
<script  src="./script.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/videogular/videogular.js"></script>
<script src="https://unpkg.com/[email protected]/dist/controls/vg-controls.js"></script>

script.js

'use strict';
angular.module('myApp',
		[
			"ngSanitize",
			"com.2fdevs.videogular",
			"com.2fdevs.videogular.plugins.controls"
		]
	)
	.controller('HomeCtrl',
		["$sce", function ($sce) {
			this.config = {
				sources: [
              {src: $sce.trustAsResourceUrl("https://live.jacarandafm.com/jacarandahigh.mp3?awparams=companionAds:false"), type: "audio/mpeg"},
              {src: $sce.trustAsResourceUrl("https://live.jacarandafm.com/jacarandahigh.mp3?awparams=companionAds:true"), type: "audio/mpeg"}
          ],
				theme: {
          url: "https://unpkg.com/[email protected]/dist/themes/default/videogular.css"
				}
			};
		}]
	);

document.addEventListener('click', function () {
  document.querySelectorAll('css-doodle').forEach(function (o) {o.update();});
});

document.addEventListener('touchstart', function () {
  document.querySelectorAll('css-doodle').forEach(function (o) {o.update();});
});

style.css

html, body {
	margin: 0;
	padding: 0;
  display: block;
	overflow: hidden;
  background: #440A4F;
}

.videogular-container {
	width: 100%;
	height: 320px;
	margin: auto;
	overflow: hidden;
}

.videogular-container.audio {
	height: 50px;
}

@media (min-width: 1200px) {
	.videogular-container {
		width: 1170px;
		height: 658.125px;
	}

	.videogular-container.audio {
		width: 1170px;
		height: 50px;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.videogular-container {
		width: 940px;
		height: 528.75px;
	}

	.videogular-container.audio {
		width: 940px;
		height: 50px;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.videogular-container {
		width: 728px;
		height: 409.5px;
	}

	.videogular-container.audio {
		width: 728px;
		height: 50px;
	}
}

videogular-jacaranda-fm-audio-player.markdown

Videogular - Jacaranda FM Audio Player

A Pen by Bright Sparks on CodePen.

License.