Early Bird Registration for DrupalCon Portland 2024 is open! Register by 23:59 UTC on 18 March 2024, to get $100 off your ticket.
By beyond67 on
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
=-=
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.
Its disappointing that the
Its disappointing that the current version of Drupal doesn't have modules for handling audio files.
There are modules for handling audio files in Drupal 8
These modules are specific for audio:
- https://www.drupal.org/project/audiofield
- https://www.drupal.org/project/media_entity_audio
There are also easily configurable formatters:
https://www.drupal.org/project/ds
https://www.drupal.org/project/custom_formatters
https://www.drupal.org/project/isfield
In the Short Term
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
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
=-=
a custom field formatter may be able to be thrown together https://www.webwash.net/drupal/tutorials/how-create-custom-field-formatt...
You can do this with a couple of modules
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.
soundmanager2
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 ...
Sound Management
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).
--
https://tambourhinoceros.net
interesting!
interesting!
Please use this module https:
Please use this module https://www.drupal.org/project/html5_audio_player