Edit Milka Export

Development Export
1

I have a pretty modified export made by Milka. I was able to add an html5 audio player that I put together into the resulting html. It works great! But I don’t know enough about the export rules to add the player into the export without breaking it. Can someone help to compile the audio player code for the export? I would like to keep the audio player as 1 block of code because I have other exports that I then could copy and paste into them. Feel free to use the export as you wish :slight_smile: All the files are in the zip file.

1- HTML Album Overview w Comments - Wider.mte (10.6 KB)

Mp3tag.zip (474.7 KB)

image
image1920×1370 457 KB
2

To me it looks like you have mixed up different parts.
I suggest to split your Audio Player HTML Code.txt file into two parts:

Audio_Player_CSS_style.css
and
Audio_Player_JS_Code.js

then include the CSS part like this in your HTML:
<link rel="stylesheet" href="Audio_Player_CSS_style.css">

and include your JS part like this in your HTML:

<button onclick="playAll()">▶ Play Album</button>
<button onclick="prevTrack()">⏮ Prev</button>
<button onclick="nextTrack()">⏭ Next</button>
<div id="nowPlaying">Now Playing: —</div>
<audio id="player" controls></audio>

<script src="Audio_Player_JS_Code.js"></script>

You could also minimize the Mp3tag-Export-Code, if you extract the existing CSS style code:

<STYLE type=text/css><!--
BODY {
	FONT-FAMILY: VERDANA, TAHOMA, ARIAL, HELVETICA;
	FONT-SIZE: 10PX;
	COLOR: #909090;
	BACKGROUND-COLOR: #222E44;
}
...

into one more external CSS file.

AFAIK you can not include CSS and HTML and JS mixed code in one external file.

Your export file could include the external CSS file after your current CSS code:

image
image791×261 22.4 KB

and your export file should look like this at the end, including the external JS code:

image
image822×424 37 KB

3

Thanks for the reply. The code works great in the resulting html once its manually inserted. The CSS can be in the Head or the Body. If it’s in the Body, it’s called inline CSS. The reason it’s all grouped together is so I can keep the Audio Player as 1 block of code. This makes it easier to add to other exports. There is debate about which is better as far as CSS code being in the Head or the Body. The issue I am having is that you can’t just put the audio player html code into the export without it breaking the output. The code needs to modified so the export code/rules are followed in order for it to work correctly. This is my issue. I don’t really know the export rules of coding to escape certain characters etc. This is why I need the audio player code modified correctly so I can put it in the export. I have presented the issue to AI and 3 of them (Co-Pilot, ChatGPT & Grok) said they could modify the code but in the end none of them actually could do it. Also, the reason I don’t have an external CSS is because this requires an additional page in each music album or 1 additional page in the parent folder which in my case is called - Music. And you can have CSS, Java Script all together in html. My collection is structured:

Music

Artist

Album

I have thousands of Artists. So I want to streamline things as much as possible. My collection is years old. All I need is the Audio Player code written for the export.

4

Sorry, but your code is currently too complicated for me to debug without splitting the HTML, CSS and JS parts apart.

You might find some useful ideas in this existing topic, which combines HTML, CSS and JavaScript in one export script.

5

Ok I fixed my dilemma! I changed only the java script to ASCII. This way Mp3tag export passes the code and generates the html and its working great!