10+ Angular 2/4 Video & Audio Plugins

Here are some Angular 2 Video & Audio Plugins that I could find while I was looking for some good options to embed my audio and video player inside my Angular app. The options and tutorials below include HTML5 video and audio players,  audio recorders and much more. Enjoy!

1. Ionic Audio for Angular 2/4

Ionic Audio for Angular 2-4
Ionic Audio for Angular 2/4

An audio player for Ionic 3 and Angular 4. Works with HTML 5 audio or native audio using Cordova Media plugin.

Website Demo Code

2. Angular 2 with SoundCloud

Angular 2 with SoundCloud
Angular 2 with SoundCloud

A basic SoundCloud API client built with Angular2 and NgRx.

Demo Code

3. HTML5 Video Angular 2

HTML5 Video Angular 2
HTML5 Video Angular 2

Videogular is an HTML5 video player for Angular 2.0. Videogular is a wrapper over the HTML5 video tag, so you can just add whatever you want. This provides a very powerful, but simple to use solution, for everybody.

Video Demo Audio Demo Code

4. Angular 2 YouTube Example App

Angular 2 YouTube Example App
Angular 2 YouTube Example App

Small Youtube sample app built with Angular 2.

Demo Code

5. ng Media Embed

ng Media Embed
ng Media Embed

An AngularJS filter/directive for converting text into emoticons, embedding videos (youtube/vimeo/mp4,ogg), audio, pdf, highlighting code syntax and embedding almost every service in an ordinary text string.

Demo Code

6. Angular 2 Youtube Player

Angular 2 Youtube Player
Angular 2 Youtube Player

This is an angular 2 component based on youtube player iframe api. This component came out as a result of the open source project Echoes Player – an alternative player for watching and listening to media from youtube.

Demo Code

7. Echo Player with Angular 2/4 Support

Echo Player with Angular 2-4 Support
Echo Player with Angular 2/4 Support

Echoes is a great youtube player developed by Oren Farhi. It’s fun & easy to listen or watch videos from youtube with Echoes. What if youtube was designed to be used as music player? This repository is an implementation of Echoes Player with Angular (+2) – It’s still a work in progress aimed at learning Angular (+2).

Demo Code

8. AngularJS Youtube iFrame Demo

AngularJS Youtube iFrame Demo
AngularJS Youtube iFrame Demo

The IFrame player API lets you embed a YouTube video player on your website and control the player using JavaScript.

Demo

9. Building a Spotify App using Angular 2

Building a Spotify App using Angular 2
Building a Spotify App using Angular 2

angular2-spotify provides Spotify Service into your component (only provide in your root componenent, but remember to import the service to every class you want to use it).

Video Video Tutorial

Sam is a web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and love to share what he learns.

Leave a Reply

Your email address will not be published. Required fields are marked *