Coder Social home page Coder Social logo

ca-team-sulley / bolt-extension-html5-audio Goto Github PK

View Code? Open in Web Editor NEW
1.0 4.0 3.0 520 KB

This bolt extension adds an audio field type to Bolt CMS. The audio preview defaults to a Waveform player with a fallback to an HTML5 Audio Element.

PHP 10.77% JavaScript 67.06% CSS 3.33% HTML 18.84%

bolt-extension-html5-audio's Introduction

HTML5 Audio

This extension adds an audio field to Bolt CMS which produces either a Waveform player, or falls back to an HTML5 Audio Element. Please edit config options to suit your needs before using this extension.

Configuration (app/config/extensions/html5-audio.cainc.yml)

The allowed-filetypes configuration key lets you add additional file types to the allowed-filetypes array. The enabled key allows you to enable the javascript and canvas based waveform player. By setting false, it will use the html5 audio element.

Accepted Types are the audio file types that you wish to allow. Keep in mind that this will not override any browser compatabilities allowed-filetypes:

  • mp3
  • wav
  • ogg
  • m4a

Setting the Enabled option to false for Waveform will cause the extension to use standard HTML5 audio element instead. waveform: enabled: true

Examples

Contenttypes.yml (Add Field to Pages labeled as Audio...)

pages:
    name: Pages
    singular_name: Page
    fields:
        title:
            type: text
            class: large
            group: content
        slug:
            type: slug
            uses: title
        image:
            type: image
        audio:
            type: audio
        teaser:
            type: html
            height: 150px
        body:
            type: html
            height: 300px
        template:
            type: templateselect
            filter: '*.twig'
    taxonomy: [ chapters ]
    recordsperpage: 100

Twig Function (Theme Template)

In this example, the name of the field on the backend is audio. The second parameter passed in the twig function is the fieldname. By passing this, it ensures that the proper field will be referenced from the player:

    {{ audioPlayer(record.audio, 'audio')|raw }}

Translations

In the spirit of keeping up with the all important i18n, we have attempted to cover all language support for the plugin that could come up. If there is a translation listed here that is not verified or missing, please feel free to contribute or verify for us.

  • Chinese
  • Czech
  • German - Translation Verified
  • English - Translation Verified
  • Spanish - Translation Verified
  • French
  • Hindi - Translation Verified
  • Hungarian
  • Italian
  • Japanese
  • Dutch - Translation Verified
  • Polish
  • Portuguese - Translation Verified
  • Russian
  • Swedish - Translation Verified

Support

If you run into issues or need a new feature, please open a ticket over at: https://github.com/ca-team-sulley/bolt-extension-html5-audio/issues

Or feel free to fix it yourself, pull-requests are welcome =)

bolt-extension-html5-audio's People

Contributors

draconusdesigns avatar jkazimir avatar psanchezg avatar rossriley avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar  avatar

bolt-extension-html5-audio's Issues

Bolt v3 version?

Hey,

Do you guys have any plans to port this to bolt v3?

Thanks for the extension!

No config file

I have installed both versions of the extension and neither install the config file into app/config/extensions.

I have install other extensions and they install correctly with the config file.

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.