Posted on by — Leave a comment

Writing Your Own Personal Cloud Music Player – Part 1

[callaction url=”https://www.youtube.com/user/JPlaya01″ background_color=”#333333″ text_color=”#ffffff” button_text=”Go Now” button_background_color=”#e64429″]Subscribe To My Youtube Page[/callaction]

Cloud Based Music Storage

Wouldn’t it be great if you had your own cloud based music player that played all of your music from your server? It’s surprisingly simple to get a basic version of that up with Lumen and Ionic, which I will now show you.
Getting Started
As before I am going to assume you have the environment set up to being development, if not take a moment and read this post. Start with creating a new project


lumen new MusicStorage

Next we need to add a dependency for CORS, if you have followed any of my previous posts this will look familiar


composer require "palanik/lumen-cors:dev-master"

This app will need to provide CORS on all requests so we need to register a global middleware, open up bootstrap/app.php and in the Register Middleware section uncomment the $app->middleware block and make it look like this:


$app->middleware([
// // IlluminateCookieMiddlewareEncryptCookies::class,
// // IlluminateCookieMiddlewareAddQueuedCookiesToResponse::class,
// // IlluminateSessionMiddlewareStartSession::class,
// // IlluminateViewMiddlewareShareErrorsFromSession::class,
// // LaravelLumenHttpMiddlewareVerifyCsrfToken::class,
palaniklumenMiddlewareLumenCors::class,]);

Since we are here anyway, might as well configure some things. Uncomment these two lines Dotenv::load(DIR.’/../’);
and $app->withFacades(); this will allow us to use the .env file to set app variables and allow us to use some useful Facades that we are definitely going to need.
Migrations
Luckily this app only has one migration, and that is for a files table that only holds id, name, and timestamps. Nice and smooth like. issue this command in your terminal


php artisan make:migration add_files_table --create=files

now open up your newly created migration and paste in the following code:


public function up() {
Schema::create('files', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::drop('files');
}
}
  • Don’t forget to run your migrations with the command php artisan migrate:install
    Controllers

Like our migration we only have one controller, add a new file in your app/Http/Controllers folder called FileController.php and add the following contents


<?php namespace AppHttpControllers;
use LaravelLumenRoutingController as BaseController;
use IlluminateSupportFacadesStorage;
use IlluminateSupportFacadesFile;
use DB;
use Request;
class FileController extends BaseController { public function saveFile() { $file = Request::file('file'); $name = $file->getClientOriginalName();<br ?--> $name = str_replace(' ', '_', $name);
Storage::put('music/'.$name, file_get_contents($file->getRealPath()));
DB::table('files')->insert(
['name' => $name ]
);
return response()->json('success');
}
public function deleteFile($name)
{
Storage::delete('music/'.$name);
return response()->json('success');
}
public function getFileList(){
$files = Storage::files('music');
$response = [];
foreach($files as $file){
$file = str_replace('music/', '', $file);
array_push($response,[
'file' =>$file
]);
}
return response()->json($response);
}
public function viewFile($name){
$name = 'music/'.$name;
return response()->make(Storage::get($name), 200, [
'Content-Type' => Storage::mimeType($name),
'Content-Disposition' => 'inline; '.$name,
]);
}
}

The methods should be pretty self-explanatory. Let’s map these to some routes, open up app/Http/routes.php and copy:


<?php /* |-------------------------------------------------------------------------- | Application Routes |-------------------------------------------------------------------------- | | Here is where you can register all of the routes for an application. | It is a breeze. Simply tell Lumen the URIs it should respond to | and give it the Closure to call when that URI is requested. | */ $app->get('/', 'FileController@getFileList');<br ?--> $app->get('{name}', 'FileController@viewFile');
$app->post('add','FileController@saveFile');
$app->get('delete/{name}', 'FileController@deleteFile');

Your backend is complete, soon I will upload part 2 – The Ionic App. Stay tuned!

Leave a Reply