Podcasts

by 2 contributors:
Our volunteers haven't translated this article into ไทย yet. Join us and help get the job done!

Podcasts is an offline-capable, entirely HTML5/JS audio app. It's chiefly designed for Firefox OS, but support for other platforms and browsers is an eventual design goal. It allows users to subscribe to any podcast and listen to it right from their device!

View on the Firefox Marketplace.
Read the full developer walkthrough.

Difficulty: Advanced

Code Breakdown:

  • 4% HTML/EJS
  • 6% CSS
  • 90% JavaScript

 

Web API Usage

localStorage
Used to store settings and basic podcast metadata. Not used for podcast audio files or cover art.
IndexedDB
An asynchronous and fast datastore for maintaining podcast audio and images.
systemXHR
Allows cross-domain requests on Firefox OS without CORS.

Folder Structure

  - locales/ (Translation files)
  - test/ (Marionette integration and UI tests)
  - www/ (client-side code/styles)
  - www/index.html (base HTML file)
  - www/gaia/ (Gaia UI files)
  - www/js/templates/ (EJS/HTML templates)

Podcasts is a packaged app, so it requires a build step to be installed to Firefox OS. The Makefile contains a multi-step process that will create a www-built folder used to install the app on a phone or the Firefox OS Simulator.

Third-party Libraries

zepto.js
The lightweight jQuery-like library simplifies common tasks such as DOM manipulation.
backbone.js
Backbone lets us do data-binding and MVC-style coding, making the app a lot easier to develop.

Document Tags and Contributors

Contributors to this page: cvan, chrisdavidmills
Last updated by: cvan,