Podpicker NPM | npm.io

Pod Picker

A Podcast Timeline Generator

Install

NPM: npm install podpicker
Bower: bower install podpicker
jsDelivr: //cdn.jsdelivr.net/podpicker/latest/PodPicker.min.js //cdn.jsdelivr.net/podpicker/latest/PodPicker.min.css

Usage

Getting Started

Include the scripts and style sheets in the \<head> section

<head>
    ...
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/podpicker/latest/PodPicker.min.css">
    <script type="text/javascript" src="//cdn.jsdelivr.net/podpicker/latest/PodPicker.min.js"></script>
</head>

Create a \<div> wrapper which will contain the Pod Picker Timeline

<div id="pp-wrapper"></div>

Initialization the Pod Picker Timeline

<script type="text/javascript">
    var pp = new PodPicker('pp-wrapper', [{'start': '00:00', 'title': 'INTRODUCTION'}]) // described in the following
</script>

Parameters

var pp = new PodPicker(id, items, options)

The PodPicker constructor accepts 3 parameters:

id is the String value of a wrapper element's id attribute
items is an Array containing items. (The properties of an item are described in section Data Format)
options is an optional Object containing a name-value map with options. (described in section Options)

Data Format

The timeline must be provided with data items, which contain the properties start and title

start is the current Section Start Time
- type: String
- format: 'hh:mm:ss', 'mm:ss' or 'ss'
title is the current Section Title
- type: String

For example:

  var items = [
    {"start":    "00:00", "title": "INTRODUCTION"},
    {"start":    "07:07", "title": "THE HISTORY AND CHRONOLOGY OF CUBISM"},
    {"start":    "18:55", "title": "PICASSO AND BRAQUE 1907-12"},
    {"start":    "40:11", "title": "ICASSO, BRAQUE AND GRIS 1912-14"},
    {"start": "01:22:32", "title": "THE INFLUENCE OF CUBISM IN FRANCE 1910-14"},
    {"start": "02:04:50", "title": "CONCLUSION"}
  ]

Options

The following options are available.

audioElem is the audio element to interact with
- type: String
- format: id attribute (the default value is the first \<audio> element of DOM)
timelineColor is the timeline Section Title color
- type: String
- format: hex color (the default value is #CECECF)
isShowStartTime is to determine whether you need to show start time in front of the Section Title
- type: Boolean
- format: true or false (the default value is false)

For example:

  var pp_with_options = new PodPicker('pp-wrapper', items, {
      "audioElem"      : "podcast_audio",
      "timelineColor"  : "#F9441A",
      "isShowStartTime": true
  })

Postpicker

A Tool To Generate Data Items Relatively Quickly

Getting Started

Import an audio file (Supports Ogg and AAC audio formats [1])
Create a new section
Export Data Items

Console

Time Machine

Hibernation

Postpicker will store your data locally within your browser, when you import the same audio file next time, it will automatically restore your data.

The following data is stored locally:

The Last Played Timestamp
The Data Items

Troubleshoot

Audio File Format

If audio file format is MP3, it's hard to accurate positioning to a specified time.

We recommend using the AAC (.m4a) and Ogg (.ogg) audio file format

For more details, see: [1] and [2]

For example:

  <audio id="podcast_audio" controls>
      <source src="your_audio_file.ogg" type="audio/ogg"> // for Chrome, Firefox 3.6+, Opera 10+
      <source src="your_audio_file.m4a" type="audio/mp4"> // for Safari, IE 9.0+
  </audio>

For more details, see [1]

Audio Converter

Convert to AAC: Music Converter
Convert to Ogg: Total Video Converter Lite
Other options: CloudConvert

License

MIT

@everything-registry/sub-chunk-2452

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago