feat: UI-21 - create audio player

package.json

@@ -28,9 +28,9 @@
     "prepare": "husky install",
     "prettier": "prettier --ignore-unknown \"./src/components/**/*.{js,yml,scss,md}\"",
     "prettier-fix": "prettier --write --ignore-unknown \"./src/components**/*.{js,yml,scss,md}\"",
-    "storybook": "start-storybook --ci -s ./dist,./src/images,./src/fonts -p 6006",
-    "storybook-build": "npm run build && build-storybook -s ./dist,./src/images,./src/fonts -o .out",
-    "build-storybook": "npm run build && build-storybook -s ./dist,./src/images,./src/fonts -o .out",
+    "storybook": "start-storybook --ci -s ./dist,./src/images,./src/fonts,./src/media -p 6006",
+    "storybook-build": "npm run build && build-storybook -s ./dist,./src/images,./src/fonts,./src/media -o .out",
+    "build-storybook": "npm run build && build-storybook -s ./dist,./src/images,./src/fonts,./src/media -o .out",
     "storybook-deploy": "storybook-to-ghpages -o .out",
     "test": "jest --coverage",
     "twatch": "jest --no-coverage --watch --verbose",

src/components/components/audio-player/_audio-player.scss

@@ -0,0 +1,3 @@
+.audio-player__player {
+  width: 100%;
+}

src/components/components/audio-player/audio-player.stories.js

@@ -0,0 +1,8 @@
+import audioPlayer from './audio-player.twig';
+import audioData from './audio-player.yml';
+
+export default {
+  title: 'Components/Media/Audio Player',
+};
+
+export const AudioPlayer = () => audioPlayer(audioData);

src/components/components/audio-player/audio-player.twig

@@ -0,0 +1,34 @@
+{#
+/**
+ * Available Variables:
+ * audio_content - An array with the audio file(s) to be played. This is an array
+   to support multiple formats.
+ * preload - Determines if the audio file should be loaded on page load. This is the
+   audio equivilant of lazy load. Defaults to 'none'.
+ * autoplay - Whether the audio should automatically play. Defaults to false.
+ * loop - Plays the audio in a loop. Defaults to false.
+ * muted - Mutes audio. Defaults to false.
+ * no_download - Disallows users from downloading the audio file.
+ */
+#}
+
+{% set audio_player__base_class = 'audio-player' %}
+{% set audio_player__modifiers = audio_player__modifiers|default([]) %}
+{% set additional_attributes = additional_attributes|default() %}
+
+<div {{ bem(audio_player__base_class, audio_player__blockname, audio_player__modifiers)}} {{ add_attributes(additional_attributes) }}>
+  <audio {{ bem('player', [], audio_player__base_class) }} controls 
+    preload="{{preload|default('none')}}" 
+    {{ (autoplay) ? 'autoplay' : ''}}
+    {{ (loop) ? 'loop' : ''}}
+    {{ (muted) ? 'muted' : ''}}
+    {% if no_download %} controlsList="nodownload"{% endif %}>
+    {% for audio_file in audio_content %}
+      <source src="{{ audio_file }}" type="audio/{{ audio_file|split('.')|last }}">
+    {% endfor %}
+    <p>Your browser doesn't support HTML5 audio.</p> 
+    {% if not no_download %}
+      <p>Here is a <a href={{ audio_content|first }}>link to the audio</a> instead.</p>
+    {% endif %}
+  </audio>
+</div>

src/components/components/audio-player/audio-player.yml

@@ -0,0 +1,4 @@
+# ball audio file by marini24 under CC 3.0
+audio_content:
+  - './ball.mp3'
+  - './ball.ogg'