Im having a difficult time finding a simple solution to play my audio files using html5.

I have a File field type that is linking to my mp3 file. Under "Manage Display" I would like to select a display format for html5 that would display the mp3 in a html5 player.

I would think this is simple to do but cant seem to find a way to do it. I do NOT want to use a flash player.

Comments

VM’s picture

modules to handle media are lagging behind. Looks to me like you are needing https://www.drupal.org/node/1174892 which is slated (per the tag to be released in D8 3.x) or contrib to port to D8 or write new ones. if you are into coding on your own keyboard, I suggest digging into D7 mediaelement and porting to D8.

beyond67’s picture

Its disappointing that the current version of Drupal doesn't have modules for handling audio files.

skowyra’s picture

A short term solution is to leverage the audio player already built in to HTML5. To do that, in the Text format and editors configuration, either create a new text format or configure an existing one. Uncheck Limit allowed HTML tags.

In the content type, add a long text field.

When creating a new node, in the WYSIWYG editor, click the Source button then add the following HTML5 audio tag

<audio controls>
    <source src="/sites/default/files/<path to your audio file>" type="audio/mpeg" />
</audio>

Granted, not a great solution for non-html aware content editors.

I use a variation of this solution on a drupal 7 site to embed youtube iframe/playlists (deltaroadhuse.com) instead of the audio tag.

Hope that helps.

Jim

VM’s picture

a custom field formatter may be able to be thrown together https://www.webwash.net/drupal/tutorials/how-create-custom-field-formatt...

iacono’s picture

Since there's no out of the gate field formatter for the html5 audio player yet, you can make your own with Display Suite and Token

1. Create a new plain text field on your content type long enough to hold a big mp3 url. Call it 'mp3 url'

2. Structure/Display Suite/Fields - Create a new Display Suite field labeled 'html5 player' check off the node entity box. Under field content enter the html5 player code and use the token from the plain text field you just created. If you browse available tokens it'll be listed under the 'nodes' drop down.

<audio controls><source src="[node:field_mp3_url]" type="audio/mpeg" /> Your browser does not support the audio element.</audio>

3 Structure/Content types/Content type with the plain text mp3 field/Manage display. Pick full content or teaser. Select the one-column layout drop down. (Display suite field wont show up until you do this)

4. Hide the 'mp3 url' plain text field from the display by setting it to 'disabled' in the region drop down.

5. Set your display suite field 'html_5 player' to the 'content' region drop down.

You should now have an Html5 audio player on your full node or teaser. If it's not playing, check the formatting of the link you put into your plain text fields. You can do this with internal or external mp3 urls.

sprite’s picture

For anyone who doesn't mind inserting a large amount of HTML into their node body, there is the following library:

http://www.schillmania.com/projects/soundmanager2/demo/bar-ui/

For D7 there is a soundmanager2 module, which has a patch available that adds the bar-ui player style.
The D7 soundmanager2 module can certainly be ported to D8, which looks like the optimal long term solution.

I use the patched D7 soundmanager2 module and library, with the bar-ui player style patched in, and it is marvelous HTML5 and javascript.

spritefully yours
Technical assistance provided to the Drupal community on my own time ...
Thank yous appreciated ...

kristofferrom’s picture

I've had this module built for my company and it also uses the Soundmanager library: https://www.drupal.org/project/sound_management

Our approach resembles what people are use to on Spotify and similar (ie. clicking titles that trigger audio playback in a player placed in a block).

afagioli’s picture

interesting! 

Dhruv Panchal’s picture