GithubHelp home page GithubHelp logo

laravel-medialibrary-audio's Introduction

Audio File Thumbnail Generator for Spatie's Laravel Media Library

This audio image generator generates thumbnails for audio files uploaded through Spatie's Media Library, just as it already does for image, video, and PDF formats. By default they look like this:

Example waveform image

Spatie's docs have more details of how plugins integrate with Media Library. Thumbnails of a mono waveform of the whole audio file are generated using ffmpeg's waveform converter. It uses the same PHP FFMpeg package that is used for the video formats already supported by Media Library, so there are no additional dependencies.

Installation & configuration

Install using composer with:

composer require synchro/laravel-medialibrary-audio 

Installing Spatie's Media Library (version 9.1.0 or later) in your Laravel project will generate a config file in config/media-library.php. Add the audio waveform generator to the list of generators in the image_generators section, including optionally setting default width, height, foreground and background properties (default values shown):

'image_generators' => [
    ...,
    Synchro\MediaLibrary\Conversions\ImageGenerators\AudioWaveform::class => [
        'width' => 2048,
        'height' => 2048,
        'foreground' => '#113554',
        'background' => '#CBE2F4',
    ]
],

These parameters are optional - you can leave them out if you're happy with the defaults.

Thumbnail colours

The waveform is drawn in the foreground colour, over the background colour. Both should be specified using standard HTML 6-digit hex values (with a leading #) passed through the media library config, as above.

Thumbnail sizing

The base size of the thumbnails can be set via the media library config, as shown above. The default is 2048 x 2048 pixels, neutral values chosen because audio files have no inherent size or aspect ratio. This is quite large, but since the images are very simple, they will compress very well in PNG format. This size doesn't directly affect the thumbnails delivered to clients because media library itself generates scaled-down versions to match client requests, however, it does have a direct effect on the aspect ratio of the thumbnails, so if you want a 16:9 ratio, change the height to 1152, or 1536 for 4:3.

Supported formats

  • aiff
  • flac
  • m4a
  • mp3
  • mp4
  • ogg
  • wav
  • wma

Running tests

If your local ffmpeg installation is in a different path you can use the environment variables to define your own path:

FFMPEG_PATH=/usr/local/bin/ffmpeg FFPROBE_PATH=/usr/local/bin/ffprobe vendor/bin/phpunit

Or on recent macOS with homebrew:

FFMPEG_PATH=/opt/homebrew/bin/ffmpeg FFPROBE_PATH=/opt/homebrew/bin/ffprobe vendor/bin/phpunit

laravel-medialibrary-audio's People

Contributors

gummibeer avatar madurapa avatar synchro avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

Forkers

madurapa

laravel-medialibrary-audio's Issues

possible transparent background

hI again,
your code generates an image then reloads it to add a background colour. would it be possible to not force background colour and instead, set background as nullable, then if no background colour is given, skip the add background color process?

I ask because I would like to use the waveform as an overlay and although could use a css mix-blend mode I think there are probably more cases where a transparent background is more desirable.

thanks.

changing the colors has no effect

I have tried changing the default colours in the media-library image_generators *and even in vendor src file AudioWaveform.php, cleard all config & cache files before re-seeding my models and yet the waveform images are always the same two colors (dark blue over light blue)

any thoughts on what I might be forgetting or doing wrongly?

*sorry for all my issues posted today eek - but thanks for your help though.

Improve background colour rendering

The current process for creating the waveform image is not ideal.

FFMpeg saves the waveform image as a transparent PNG file. We that read that file back in, and use the Spatie Image package to fill in the background before optimising and resaving back into the same PNG file. This background filling process isn't quite the right operation, and the waveform ends up with some white fringing against the background colour, though it doesn't look too terrible.

A better approach would be to generate an image filled with the background colour, then overlay the waveform on top if it, all in memory without having to save to an intermediate file. This would also eliminate the fringing.

We are missing two things though:

  • The PHP FFMpeg package doesn't have the ability to extract a GD or Imagick image instance, only to save to a file
  • The Spatie Image library isn't much use for creating images from scratch

So fixing this will probably also involve PRs on FFMPeg, and probably using some other image library to do the compositing.

generate responsive waveforms

Hi, Is it possible to generate responsive waveform images at a range of sizes as with regular image uploads?
*although i am getting the image generated and it is in the medoa tabler as responvive, there is only 1 size and it doesn't render with the same tag I use for regular images {{ $img('responsive')->attributes(['class'=>'img']) }}

Conversion name?

Maybe I'm being dumb (which is possible) but is it possible to name this conversion? We already have thumbnails which use the preview conversion and would like to call this waveform conversion or something similar so I can call $this->getFirstMediaUrl('audio', 'waveform');

Configure tests

This project contains just a simple plugin, but in order to test it, it's necessary to bootstrap and configure an entire Laravel instance with an installation of Spatie Media Library. The only reason this is needed is because the FFmpeg instance the plugin uses needs to know the paths to the ffmpeg and ffprobe binaries, and these are obtained from the ML config, and access to that config is handled via Laravel's config helper function, which can't work unless there is an app instance, and so on, until you have a fully shaved yak.

The tests are very simple, but they have huge config implications, and I'm just not sure where to start.

missing mime-types / alternatives

Ive noticed I'm not getting thumbs generated for audio/x-wav or audio/x-m4a mime-types and wondered if they needed adding to the supportedMimeTypes list?

installation?

Hi, I've just been pointed here by Spatie and don't really know how to install it as it's not a package. would you have any short instructions? (the Spatie page for Creating a custom image generator doesn't say either and I'd hate to be getting it all wrong.

thanks.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.