[Add] Audio supports and update readme

README.md

@@ -27,6 +27,12 @@ export default {
 ## Docs
 You can see the complete documentation with examples here: [https://vue-cool-lightbox.lucaspulliese.com/](https://vue-cool-lightbox.lucaspulliese.com/).
 
+## Supported contents
+- Images
+- Videos
+- Audios (mp3, wav, ogg)
+- iFrames
+
 ## Contributing
 Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
 

src/components/CoolLightBox.vue

@@ -171,6 +171,19 @@
                 <source :src="checkIsMp4(getItemSrc(itemIndex))" :type="'video/'+(getVideoExt(getItemSrc(itemIndex)) ? getVideoExt(getItemSrc(itemIndex)) : getExtFromItem(itemIndex))">
                 Sorry, your browser doesn't support embedded videos
               </video>
+
+              <audio
+                  v-autoplayObserver
+                :data-autoplay="setAutoplay(itemIndex)"
+                class="cool-lightbox-video"
+                v-if="checkIsAudio(getItemSrc(itemIndex))"
+                :style="aspectRatioVideo" :key="checkIsAudio(getItemSrc(itemIndex))"
+                controls=""
+                controlslist="nodownload">
+                <source :src="checkIsAudio(getItemSrc(itemIndex))" :type="'audio/'+getAudioExt(getItemSrc(itemIndex))">
+                Sorry, your browser does not support the audio element
+              </audio>
+
             </div>
             <!--/cool-lightbox__iframe-->
           </div>
@@ -274,6 +287,19 @@
                     <source :src="checkIsMp4(getItemSrc(imgIndex))" :type="'video/'+(getVideoExt(getItemSrc(imgIndex)) ? getVideoExt(getItemSrc(imgIndex)) : getExtFromItem(imgIndex))">
                     Sorry, your browser doesn't support embedded videos
                   </video>
+
+                  <audio
+                      v-autoplayObserver
+                      :data-autoplay="setAutoplay(itemIndex)"
+                      class="cool-lightbox-video"
+                      v-if="checkIsAudio(getItemSrc(itemIndex))"
+                      :style="aspectRatioVideo" :key="checkIsAudio(getItemSrc(itemIndex))"
+                      controls=""
+                      controlslist="nodownload">
+                    <source :src="checkIsAudio(getItemSrc(itemIndex))" :type="'audio/'+getAudioExt(getItemSrc(itemIndex))">
+                    Sorry, your browser does not support the audio element
+                  </audio>
+
                 </transition>
               </div>
               <!--/cool-lightbox__iframe-->
@@ -1828,6 +1854,41 @@ export default {
       return false
     },
 
+    checkIsAudio(url) {
+      if(this.imgIndex === null) {
+        return false
+      }
+
+      const str = new String(url);
+      if(
+          (str.indexOf('.mp3') !== -1) ||
+          (str.indexOf('.ogg') !== -1) ||
+          (str.indexOf('.wav') !== -1)
+      ) {
+        return url
+      }
+
+      return false
+    },
+
+    // if is video get extension
+    getAudioExt(url) {
+      if(this.imgIndex === null) {
+        return false
+      }
+
+      const str = new String(url);
+      if(str.indexOf('.mp3') !== -1 || str.indexOf('.wav') !== -1){
+        return 'mpeg'
+      }
+
+      if(str.indexOf('.ogg') !== -1) {
+        return 'ogg'
+      }
+
+      return false
+    },
+
     // check if item is object
     checkIfIsObject(itemIndex) {
       const item = this.items[itemIndex]