Audio player
The Audio player component was created to allow for a fully accessible, fully responsive audio player to be accessed across our websites. You can now highlight any available audio content that is related to the topic on your page; i.e. The Bid podcast, or an online BlackRock event.
Think of it as an accompaniment to your topic, such as an article or insight on Sustainability, and you are serving up the podcast that is of the same topic.
We’ve baked many features into this component:
- Audio player is built using videoJS
- Ability to pull in either fully dynamic podcast content via RSS feed, or manually curated content
- Fully accessible with complete keyboard support along with ability to add text transcripts Ability to include a full playlist (dynamic or curated) in our Large appearance
- Features built in to subscribe, share, or explore more podcasts to name a few
Publishing? View the DCR guidebook for detailed instructions.
Paragraph appearances
Our Paragraph appearance has two options:
• Side by side appearance
• In-line appearance
These two appearances are designed to slot in-line to your paragraph content, as a supporting element. You can not include a playlist in either of these options.
PRO TIP: Use the large headline appearance if you are using this to introducing a new content section to your page; think of it as your H2. If this is used as support for an established section, use the “medium” size headline (H3).
Side by side appearance
We recommend using this appearance if your entire page/section has a single topic and you would like to pull in any audio/podcast that helps reinforce the topic. This appearance has more of an emphasis on the audio player, and you should have a decent amount of supporting text to warrant this tall of a player. Think of it as an accompaniment to your topic, such as an article or insight on Sustainability, and you are serving up the podcast that is of the same topic.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
In-line appearance
We recommend using this appearance if your entire page/section has a single topic and you would like to pull in any audio/podcast that helps reinforce the topic. This appearance has more of an emphasis on the audio player, and you should have a decent amount of supporting text to warrant this tall of a player. Think of it as an accompaniment to your topic, such as an article or insight on Sustainability, and you are serving up the podcast that is of the same topic.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Rules and recommendations
Note: These rules apply to both Paragraph appearance options. For more in-depth technical details, see our Wiki page.
Side by side yellow audio player
To help you visualize different possible audio player background colors, we stacked our options together to give you a more clear understanding of how this could look. Here is our yellow player option.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Side by side pink audio player
To help you visualize different possible audio player background colors, we stacked our options together to give you a more clear understanding of how this could look. Here is our yellow player option.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Large appearances
Our Large appearance has one key functionality difference:
• The ability to include a dynamic or curated playlist
This appearance is best suited when you want to bring a lot of emphasis on the audio content. Think of it as a “hero” appearance, when you want to draw a lot of attention to the player. It is not tied to a “paragraph” element, so you can place it wherever the content is needed.
Turning climate risk into opportunity
Climate change is reshaping the global economy. And we believe it’s not just an investment risk – it’s an investment opportunity. But most ignore the effect of climate change in their economic projections. We think that’s wrong.
On the last episode of a five-part mini-series on our global outlook, Vivek Paul, Senior Investment Strategist… see more
Climate change is reshaping the global economy. And we believe it’s not just an investment risk – it’s an investment opportunity. But most ignore the effect of climate change in their economic projections. We think that’s wrong.
On the last episode of a five-part mini-series on our global outlook, Vivek Paul, Senior Investment Strategist… see more
Climate change is reshaping the global economy. And we believe it’s not just an investment risk – it’s an investment opportunity. But most ignore the effect of climate change in their economic projections. We think that’s wrong.
On the last episode of a five-part mini-series on our global outlook, Vivek Paul, Senior Investment Strategist…
| Component element | Optional element | Rules | ||
|---|---|---|---|---|
| A: Background color options | • BLK_White with border • BLK_Neutral • BLK_Yellow • BLK_Pink • Label background color: Can not change — it is automatically set per core background selection |
|||
| B: Audio label | • Manual input — you can update for translations or to whatever your audio content is (i.e. “THE BID” / “ENCUENTRO”) • Label character count: ~20* • Dynamic player — Will be populated dynamically |
|||
| C: Headline & description | • Headline & description is manually loaded — must provide content to Publishing • Description character count is 350, then ellipse (...) appears along with “see more” link that expands the content • Recommend using the audio title and audio description |
|||
| D: Audio player | • Player background color options: Only BLK_White • Headline, date, description, & transcript is automatically pulled in from the podcast ID/episode |
|||
| d1: Playlist | • Manual - You can choose which episodes you would like to include in your playlist - they should relate to the main topic (i.e. all “Sustainable” related podcasts) • See our technical guide for instructions |
|||
| d3: Player menu | • Can not edit these menu choices • Menu items for Dynamic player include: • Descriptions - For dynamic player, description will get populated automatically from Art19 • Explore More podcasts: Drives users to “The Bid’s” art19 landing page • Listen on > Apple Podcasts, Google Podcasts, Spotify • Share episode > Facebook, LinkedIn, Email • Subscribe > Apple Podcasts, Google Podcasts, Spotify, RSS • Sub-menu items for Manual player include: • Description (You must provide for Publishing) • Share: Facebook, LinkedIn, Email |
|||
| d3: Transcript | • Currently, you must manually provide the transcript for Publishing, which can be found on The Bid’s homepage — Copy & paste it from whichever episode(s) you need • A global folder within teamsite is currently being worked on that hosts all of our BID podcast transcripts. This will be where all our episode transcripts are dynamically pulled in from. Stay tuned |
|||
| *NOTE: Due to varying alphabets and character widths, please ensure your publisher tests this prior to release | ||||
Alternate variations
To help you visualize different possible layouts and background colors, we stacked a few components together to give you a more clear understanding of how this could look.
Turning climate risk into opportunity
Climate change is reshaping the global economy. And we believe it’s not just an investment risk – it’s an investment opportunity. But most ignore the effect of climate change in their economic projections. We think that’s wrong.
On the last episode of a five-part mini-series on our global outlook, Vivek Paul, Senior Investment Strategist… see more
Climate change is reshaping the global economy. And we believe it’s not just an investment risk – it’s an investment opportunity. But most ignore the effect of climate change in their economic projections. We think that’s wrong.
On the last episode of a five-part mini-series on our global outlook, Vivek Paul, Senior Investment Strategist… see more
Turning climate risk into opportunity
Climate change is reshaping the global economy. And we believe it’s not just an investment risk – it’s an investment opportunity. But most ignore the effect of climate change in their economic projections. We think that’s wrong.
On the last episode of a five-part mini-series on our global outlook, Vivek Paul, Senior Investment Strategist… see more
Climate change is reshaping the global economy. And we believe it’s not just an investment risk – it’s an investment opportunity. But most ignore the effect of climate change in their economic projections. We think that’s wrong.
On the last episode of a five-part mini-series on our global outlook, Vivek Paul, Senior Investment Strategist… see more
Turning climate risk into opportunity
Climate change is reshaping the global economy. And we believe it’s not just an investment risk – it’s an investment opportunity. But most ignore the effect of climate change in their economic projections. We think that’s wrong.
On the last episode of a five-part mini-series on our global outlook, Vivek Paul, Senior Investment Strategist… see more
Climate change is reshaping the global economy. And we believe it’s not just an investment risk – it’s an investment opportunity. But most ignore the effect of climate change in their economic projections. We think that’s wrong.
On the last episode of a five-part mini-series on our global outlook, Vivek Paul, Senior Investment Strategist… see more
• Only 1 headline per component is allowed
• Can add as many paragraphs as you need - Just load another new paragraph to continue your content
• No character limits
• Headline sizes:
• Large (40px Extrabold) = H2 — or — Medium (32px Bold) = H3 headline size option
• Text can include hyperlinks
• See our Paragraph component for reference
• For Side by side appearance, player is always locked to the first paragraph
• For in-line appearance, you decide between which paragraphs it is placed
• Player background color options: BLK_White, BLK_Pink, BLK_Yellow
• In-line appearance:
• Player background color options: Only BLK_White
• Menu items for Dynamic player include:
• Descriptions - For dynamic player, description will get populated automatically from Art19
• Explore More podcasts: Drives users to “The Bid’s” art19 landing page
• Listen on > Apple Podcasts, Google Podcasts, Spotify
• Share episode > Facebook, LinkedIn, Email
• Subscribe > Apple Podcasts, Google Podcasts, Spotify, RSS
• Sub-menu items for Manual player include:
• Description (You must provide for Publishing)
• Share: Facebook, LinkedIn, Email
• A global folder within teamsite is currently being worked on that hosts all of our BID podcast transcripts. This will be where all our episode transcripts are dynamically pulled in from. Stay tuned