#How to deal with RAW Binary mp3?

1 messages · Page 1 of 1 (latest)

split kestrel
#

Hello. I am getting results from an API that is give me MP3 data results like this:

���DDwwww�������ww,\PPPPPPPA�0�% BP�% BQ���D�"
D˗.\������ID��D���D�"D�$J�j���������Q�H�"D�$�%U�ꪪ�����$H�$H�9�d�$A@ � "D�$���ʪ���?�����ʪ��_����333��UUUR���fff`�@@@@D�(S�(2<�,�@��p�FYCN#
��z��TvF�wn)=D�i��@��"�6��A$,LNN!&]T��c$�eL������R � K�� ��� � ��2w"������PsLD�3^LɆ�^G�A
��>�������Y��M���LZқۂ�b�*�A�RIv�Q���$���4

How can I play this mp3 data in appsmith? I tried binding it directly to the audio widget but that doesn't seem to work.

hard gorge
#

Hi @split kestrel , you can use the JavaScript btoa() method to convert the binary data to Base64. Then prepend the value with data:audio/mpeg;base64, to create a data url. It should look something like this:

data:audio/mpeg;base64,{{btoa(Api1.data)}}
#

https://developer.mozilla.org/en-US/docs/Web/API/Window/btoa
https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs

MDN Web Docs
Window: btoa() method - Web APIs | MDN

The btoa() method of the Window interface creates a
Base64-encoded ASCII string from a binary string (i.e., a
string in which each character in the string is treated as a byte
of binary data).

MDN Web Docs
Data URLs - HTTP | MDN

Data URLs, URLs prefixed with the data: scheme, allow content creators to embed small files inline in documents. They were formerly known as "data URIs" until that name was retired by the WHATWG.

split kestrel
#

Hi @hard gorge ! Thanks so much for the help. I think this got me closer but I seem to have a new error:

I placed the following into a AUDIO WIDGET:

data:audio/mpeg;base64,{{btoa(Get_Dubbed.data)}}

I am pulling an mp3 file from ElevanLabs and want to play it in the widget.

After placing the above code I get the error:

Failed to execute 'btoa' on 'WorkerGlobalScope': The string to be encoded contains characters outside of the Latin1 range.

Just to be clear...the results from Get_Dubbed.data appears to be a binary dump of an MP3 file, including the ID3 metadata tags. Example below:

ID3#TSSELavf59.27.100����Info}o� "$'),.1468;>ACEHKMPRUWZ]adgilnqsvy{}��������������������������������������������������Lavc59.37$*o�������ԖZ��
�>���� �d��hѣG9��s��<�5ѣ��@@
ad�����������������"3�� @�d����ww�&..
��7��@h
�41��\\�wwD��DDDDGwww�������DDwwww�������ww,\PPPPPPPA�0�% BP�% BQ���D�"
D˗.\������ID��D���D�"D�$J�j���������Q�H�"D�$�%U�ꪪ�����$H�$H�9�d�$A@ � "D�$���ʪ���?�����ʪ������333��UUUR���fff�@@@@D�(S�(2<�,�@��p�FYCN# ��z��TvF�wn)=D�i��@��"�6��A$,LNN!&]T��c$�eL������R � K�� ��� � ��2w"������PsLD�3^LɆ�^G�A ��>�������Y��M���LZқۂ�b�*�A�RIv�Q���$���4����m(�Esٷ>�d � ��G[ۣ���+�@�Tv,)�Q�Qe �#�.��Nl����YJf �v>����>v���<V6�"�!ɚ�%E��n%&����/%�9#.-�]?C�������  �zqcU�p�q$
��'�Y: �xV�^^��?C����������O��4ϝ*�/2.��N>:'�
�Ҥ8>5`�z\l���� ��g�c�dǾh��V�+��9+?��i�E�A R�}��&�+0�iR�of�=��Q(JJJ+!��b�<ն�����P�v.�*����8U&t��Ym~Ԩk�/^�������X��1+�� �����%��1�G��|'��ڒ ��� ���Q
��DJ���BX������4�BcF�Sj�a)�Z�I—8�����

hard gorge
#

Here's another library you could try using for the binary=>base64 conversion. I've had to use it before on certain files that didn't work with the native JS btoa() method. Just import the library using the icon above the settings, then use Base64.btoa()
https://cdn.jsdelivr.net/npm/[email protected]/base64.min.js

Screenshot_2024-06-10_at_11.57.44_AM.png
split kestrel
#

Hi @hard gorge. Sorry to keep running to ya but I am still having the same issue after installing the library.

In the Appsmith audio widget I have

data:audio/mpeg;base64,{{Base64.btoa(Get_Dubbed.data)}}

give error Failed to execute 'btoa' on 'WorkerGlobalScope': The string to be encoded contains characters outside of the Latin1 range.

hard gorge
#

or send me one of the binary files and I'll see if I can get it to convert and play.

grave kelp
grave kelp