GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → nupamore → youtube-music-player

nupamore / youtube-music-player

Licence: MIT license
Mini music player for website

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Labels

web-componentmusic-playeryoutube-api

Projects that are alternatives of or similar to youtube-music-player

Ylight Music
Awesome React PWA music streaming app built with Material UI using Youtube API's. Search, Play, Like & Download
Stars: ✭ 141 (+781.25%)
Mutual labels:  music-player, youtube-api
ytqck.github.io
YouTube quick ⚡ Search and Download Music for Free.
Stars: ✭ 18 (+12.5%)
Mutual labels:  music-player, youtube-api
Html Midi Player
🎹 Play and display MIDI files on the web
Stars: ✭ 158 (+887.5%)
Mutual labels:  web-component, music-player
Ngx Youtube Player
YouTube player app built with Angular 7
Stars: ✭ 92 (+475%)
Mutual labels:  music-player, youtube-api
angular-youtube-player
Simple youtube player created with angular and typescript. See demo.
Stars: ✭ 35 (+118.75%)
Mutual labels:  music-player, youtube-api
cloud-player-desktop
Desktop music player built with electron to play youtube, soundcloud and mixcloud tracks
Stars: ✭ 51 (+218.75%)
Mutual labels:  music-player
TamilVcMusic
A telegram bot for which is help to play songs in vc 🥰 give 🌟 and fork this repo before use 😏
Stars: ✭ 126 (+687.5%)
Mutual labels:  music-player
stencil-fetch
Fetch API implementation with Stenciljs
Stars: ✭ 18 (+12.5%)
Mutual labels:  web-component
yt-migrate
Import all your YouTube subscriptions from one account to another
Stars: ✭ 83 (+418.75%)
Mutual labels:  youtube-api
BitWave
A media player based on MPV, QML.
Stars: ✭ 22 (+37.5%)
Mutual labels:  music-player
listen1 chrome extension
one for all free music in china (chrome extension, also works for firefox)
Stars: ✭ 8,399 (+52393.75%)
Mutual labels:  music-player
Bilibili-MusicPlayer
B站音乐区音频第三方播放器 (Bilibili Third-party online music player for Android) MVVM+Room+LiveData+Retrofit+Exoplayer
Stars: ✭ 19 (+18.75%)
Mutual labels:  music-player
Meaga
一个由Electron和Vue联合打造的本地音乐播放器
Stars: ✭ 36 (+125%)
Mutual labels:  music-player
vaadin-split-layout
The Web Component which allows you to partition a layout into resizeable areas. Part of the Vaadin components.
Stars: ✭ 40 (+150%)
Mutual labels:  web-component
soube
Music player based on electronjs
Stars: ✭ 32 (+100%)
Mutual labels:  music-player
musicplayer-api
Simple wrapper around Web Audio API providing gapless playback
Stars: ✭ 16 (+0%)
Mutual labels:  music-player
CarPC
React App designed to run on a raspberry pi and make driving my car more fun.
Stars: ✭ 19 (+18.75%)
Mutual labels:  music-player
YT-Together
Simple react application, for synchronizing multiple client's YouTube-IFrames
Stars: ✭ 23 (+43.75%)
Mutual labels:  youtube-api
RadioPlayerV3
An Advanced Telegram Bot to Play Radio & Music in Voice Chat. This is Also The Source Code of The Bot Which is Being Used For Playing Radio in @AsmSafone Channel ❤️
Stars: ✭ 232 (+1350%)
Mutual labels:  music-player
Prodigal-iOS
Music Player for iOS which looks & feels like classic player
Stars: ✭ 39 (+143.75%)
Mutual labels:  music-player
View All Similar Projects ➔

youtube-music-player

Mini music player for website
sample

Usage

Load js file

<script src="youtube-music-player.js"></script>

Set list

YMP.list = [                  // youtube link
  { name:'The sun of spring', src:'EpNp6gFzFZ0' },
  { name:'Cold winter',       src:'hDyfnSb7zZ0' },
  { name:'Silence',           src:'_WXHjb01IOg' }
];

... It's over!

Expert

Use Controller

<div>
  <a id="ymp-play">play</a>
  <a id="ymp-pause">pause</a>
  <a id="ymp-change">change</a>
</div>

JS control

// play
YMP.play();
// pause
YMP.pause();
// next song
YMP.next();
// prev song
YMP.prev();
// change song
YMP.change(name);
// change song (shuffle or not shuffle)
YMP.change();
// not shuffle
YMP.shuffle = false;

// access Youtube API
YMP.player.setVolume(10);

Customize!

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<style>
  a {
    color: #999;
    transition: 0.3s;
  }
  a:hover {
    color:#FFF;
    background-color: #444;
    cursor: pointer;
  }
</style>
<body>
  <a><i id="ymp-play" class="fa fa-play fa-2x"></i></a>
  <a><i id="ymp-pause" class="fa fa-pause fa-2x"></i></a>
  <a><i id="ymp-change" class="fa fa-step-forward fa-2x"></i></a>
</body>

license

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].