-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
727 lines (607 loc) · 47.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bitcoin Audional Generator</title>
<!-- include styles.css -->
<link rel="stylesheet" href="/styles/styles.css" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<script>
function toggleInfo(buttonId) {
console.log("Button clicked: " + buttonId); // Debugging line
// Get the buttons
var audionalsButton = document.getElementById("audionals-button");
var jsonButton = document.getElementById("json-button");
var donateButton = document.getElementById("donate-button");
// Get the content sections
var audionalsContent = document.getElementById("info-content-audionals");
var jsonContent = document.getElementById("info-content-json");
var donateContent = document.getElementById("info-content-donate");
// Check the current display status of the clicked content
var isVisible = (document.getElementById("info-content-" + buttonId).style.display === "block");
// First, reset all buttons and content
audionalsButton.classList.remove("active");
jsonButton.classList.remove("active");
donateButton.classList.remove("active");
audionalsContent.style.display = "none";
jsonContent.style.display = "none";
donateContent.style.display = "none";
// If the clicked content is not already visible, show it
if (!isVisible) {
document.getElementById(buttonId + "-button").classList.add("active");
document.getElementById("info-content-" + buttonId).style.display = "block";
}
// Add the event listener to the document
document.addEventListener('click', function(event) {
var audionalsButton = document.getElementById("audionals-button");
var jsonButton = document.getElementById("json-button");
var donateButton = document.getElementById("donate-button");
var audionalsContent = document.getElementById("info-content-audionals");
var jsonContent = document.getElementById("info-content-json");
var donateContent = document.getElementById("info-content-donate");
// Check if the click was outside the info content areas
if (!audionalsContent.contains(event.target) && !jsonContent.contains(event.target) && !donateContent.contains(event.target) && event.target !== audionalsButton && event.target !== jsonButton && event.target !== donateButton) {
// Reset the state of all buttons and hide the content
audionalsButton.classList.remove("active");
jsonButton.classList.remove("active");
donateButton.classList.remove("active");
audionalsContent.style.display = "none";
jsonContent.style.display = "none";
donateContent.style.display = "none";
}
});
}
function closeInfo(contentId) {
document.getElementById(contentId).style.display = "none";
var buttonId = contentId.split('-')[2] + '-button';
document.getElementById(buttonId).classList.remove("active");
}
// a function to link the users to another page - https://audionals.com/ordSPD/
function tryAudionalSequencer() {
window.location.href = 'https://audionals.com/ordSPD/';
}
// function tryAudionalSequencer() {
// a function to open the sequencer in an iframe
function openAudionalSequencerInIframe() {
var sequencerContainer = document.getElementById('sequencer-container');
// Check if the iframe already exists
var existingIframe = document.getElementById('sequencer-iframe');
if (existingIframe) {
// If it exists, simply toggle its visibility
if (existingIframe.style.display === 'none') {
existingIframe.style.display = 'block';
} else {
existingIframe.style.display = 'none';
}
} else {
// If it doesn't exist, create it
var sequencerIframe = document.createElement('iframe');
sequencerIframe.id = 'sequencer-iframe';
sequencerIframe.src = 'BETA_XI/index.html';
sequencerIframe.style.width = '100%'; // Set the width to 100% of the container
// Set the height of the iframe as desired (e.g., 600px)
sequencerIframe.style.height = '80vh'; // Set the height to 80% of the viewport height
// Apply CSS scaling to shrink the content of the iframe
var scaleValue = 0.9; // e.g., shrink to 80% of the original size
sequencerIframe.style.transform = 'scale(' + scaleValue + ')';
sequencerIframe.style.transformOrigin = '0 0'; // Set the origin of the transformation to the top-left corner
// Adjust the width and height of the iframe element to fit the scaled content
sequencerIframe.style.width = (99 / scaleValue) + '%';
sequencerIframe.style.height = (600 / scaleValue) + 'px';
// Add the iframe to the container
sequencerContainer.appendChild(sequencerIframe);
}
}
// Call tryAudionalSequencer function once the window has loaded
window.onload = function() {
openAudionalSequencerInIframe();
};
</script>
</head>
<body>
<div class="header">
<img src="AudionalsLogo.png" alt="Audionals Logo">
<h1>Audionals.com</h1>
<div>
<button id="sequencer-button" class="magic-button" onclick="tryAudionalSequencer()" style="font-size: 16px; font-weight: bold;">Play with the Ord SPD</button>
<p style="text-align: center; color: rgb(255, 255, 255);">Mix Raw On-chain Audio</p>
</div>
<img src="AudionalsLogo.png" alt="Audionals Logo">
</div>
<!-- This is where the sequencer will appear -->
<div id="sequencer-container">
<!-- We'll create the iframe here with JavaScript -->
</div>
<div class="button-container">
<button id="audionals-button" class="info-button" onclick="toggleInfo('audionals')">What are Audionals?</button>
<button id="json-button" class="more-info-button" onclick="toggleInfo('json')">New JSON standard?</button>
<button id="donate-button" class="donate-button" onclick="toggleInfo('donate')">Donate to support more Audional innovation</button>
</div>
<div class="info-content" id="info-content-audionals">
<p><strong>Audionals: Revolutionising Music Production and Rights Management on the Bitcoin Blockchain</strong></p><br>
<p>Audionals is a pioneering protocol that transforms music production, distribution and rights management by offering an on-chain digital audio workstation (DAW) built on the Bitcoin blockchain. By fully operating within a decentralised on-chain environment, Audionals redefines Web3 music. This entirely on-chain approach guarantees that every facet of music creation, collaboration, and ownership is securely managed and transparently documented on the blockchain, creating an immutable and trustless ecosystem for artists and producers.</p><br>
<p>Each song created with the Audionals protocol is a true Web3 composition, existing solely through programmatic assembly in a single-domain, on-chain environment. The output files, known as Bitcoin Audionals, are immutable recordings that encapsulate the entire creation process. When executed, these files programmatically generate the song using the on-chain resources.</p><br>
<p>One of the most groundbreaking aspects of Audionals is its approach to rights management. Every element involved in a song’s creation—such as vocal recordings, keyboard parts, and plugin codes—is owned and held within individual wallets. The song file itself serves as an immutable Merkle tree that references each component’s wallet address and rights holder. This eliminates the need for traditional contractual agreements and legal intermediaries, as the song file inherently represents all associated rights.</p><br>
<p>In essence, Audionals redefines how music is created, owned, and distributed by embedding rights directly into the song’s digital structure. This ensures transparency, immutability, and decentralized ownership, paving the way for a new era of music production in the Web3 landscape.</p><br>
<p>Audionals is revolutionizing the music industry by making blockchain technology affordable and accessible to all musicians. This innovation liberates artists from the burden of high file sizes and costs, paving the way for an era of unparalleled creativity and innovation for audial artists on the Bitcoin blockchain. The Audionals protocol marks the start of a fresh chapter, starting with a modest sample library that promises to evolve into a groundbreaking musical ecosystem, with the potential to transform the financial dynamics of the music industry to better support the very artists who breathe life into it.</p><br>
<p>By integrating all elements of music production into the blockchain, the Audionals protocol ensures comprehensive and transparent attribution for every component used in creating a song. This means that not only are composers and sample holders recognized, but so are the contributions of those using specific effects and tools, such as reverb, EQ adjustments, delay, compression, and various synthesizers and other digital instruments. Every modification and effect is recorded with a unique identifier, ensuring that each participant in the creative process, from composers to producers to plugin and instrument creators, receives fair acknowledgment.</p><br>
<p>The fundamental technology that drives Audionals.com is the inscription of data to the Bitcoin blockchain. Audio data in all its forms, including Base64 embedded JSON files, can be inscribed and sequenced into infinite new songs in the future.</p><br>
<p>The use of JSON files makes the audio data more easily indexable and sortable by its ability to hold extensive, user-defined metadata. Metadata such as the audio type, the instrument used, genre, key, BPM, and other user-defined parameters can be added to JSON files, which facilitates searching, categorization, and manipulation of the audio files on the platform. It essentially creates a database of audio files with advanced metadata that are easily searchable and sortable for use in future applications such as the Audional Sequencer that allows the creation of new music using existing inscriptions to save on the cost of on-chain music production and distribution.</p><br>
<p>Audio data in its raw form can also be inscribed and recursively accessed in whole or in part for distribution of future releases or third-party remixes that always access the original file when executed, ensuring that on-chain attribution is as immutable as Bitcoin transactions themselves.</p><br>
<p>The ability to inscribe audio data directly onto the blockchain or to store and access audio from other permanent immutable storage solutions has profound implications for ownership, copyright, authenticity, and control. Once a piece of immutable audio is inscribed or connected to the blockchain, it is permanent. Its inscribed usage cannot be altered or deleted, the user's ownership is transparent, and the original sample owner's rights are upheld if any part of their work is reused in future compositions.</p><br>
<p>Today, there are alternative, permanent data storage solutions available that offer similar levels of permanence and security as Bitcoin without the high cost of inscribing audio directly onto the Blockchain itself. We can leverage the immutability and P2P distribution power of Bitcoin to bridge to other data solutions such as sOrdinals or StackerDB inscriptions on Bitcoin's first Layer 2 - Stacks, to get the best of both worlds. This combination of technologies is going to completely reshape the musical landscape in every way from sample creation and usage tracking, collaborative music production including music software distribution and usage tracking for audio processing apps, plug-ins, and instruments like soft synths.</p><br>
<p>The administration of music copyright, ownership, and distribution is being optimized in ways we never dreamed of, providing an indisputable record of participation in the origins of original content. This is not just for the composers but for the producers of every element of a song. Both production and distribution become part of a single technological leap, ensuring that the rights of every participant are upheld from conception to distribution and even beyond.</p><br>
<p>Audionals, in all their forms, audio or code, sound or software, can be subjected to on-chain recursive techniques, pulling together Base64 encoded samples, real audio samples, soft synths, and audio processing plugins in on-chain initiated programmatic signal processes to form new musical creations, enabling users to "record" and then distribute their music directly on-chain to an audience who only need to own a Bitcoin wallet and hold some Bitcoin if they want to engage with their favorite artists.</p><br>
<p>By leveraging audional technology and the immutable nature of the blockchain, musicians can establish permanent, verifiable ownership, distribute their work entirely peer-to-peer, and track all of its usage with ease. The transparency and traceability offered by audional technology also enables accurate and transparent royalty payment tracking and distribution, ensuring all creators receive recognition and income for their work no matter how small their contribution might be. Unlike Spotify removing payment for songs with fewer than 1000 plays, the Audional vision is one where every single element of a song's production gets full attribution in an environment where this is not only possible but extremely healthy at a grassroots level and promotes greater creative collaboration through guaranteed financial inclusion.</p><br>
<p>Owners of software used in the music creation process can apply new business models based purely on actual usage and financial earnings that their software is a part of rather than complex subscription models that add friction at a grassroots level and earn nothing extra when their software produces big hits. The Audionals protocol improves efficiency, fairness, and productivity for all participants and allows some previously external yet vital elements of the music creation process to become a visible part of every song that is also included in the financial framework.</p><br>
<p>In essence, Audionals.com represents a novel application of blockchain technology in the realm of audio and music. Its unique approach to audio inscription, coupled with the innovative on-chain composition feature, is poised to disrupt the traditional music industry and empower artists in unprecedented ways. In a world where digital technology continues to reshape the way we create, distribute, and consume music, Audionals.com offers a glimpse into a future where music and blockchain become inextricably linked, drawing all participants into the same transparent, data-driven environment where the music really can speak for itself.</p>
</div>
<!-- <div class="info-content" id="info-content-audionals">
<p>Audionals are a groundbreaking new standard for producing, inscribing, and distributing music via the Bitcoin blockchain, providing a unique tool for musicians, sound designers, music enthusiasts, and audiophile collectors alike to create and distribute their work in a web3 environment guaranteed attribution for all future uses of their work. The platform takes advantage of the secure and transparent nature of the blockchain, offering a unique method for inscribing data directly on the blockchain or bridging off-chain data from alternative permanent data storage solutions to tokens traded purely on the Bitcoin blockchain. This innovative approach taken by Audionals.com might very well disrupt the traditional music industry and usher in a new era of audio content creation, distribution, ownership, and administration.</p><br>
<p>Audionals is revolutionising the music industry by making blockchain technology affordable and accessible to all musicians. This innovation liberates artists from the burden of high file sizes and costs, paving the way for an era of unparalleled creativity and innovation for audial artists on the Bitcoin blockchain. The Audionals protocol marks the start of a fresh chapter, starting with a modest sample library that promises to evolve into a groundbreaking musical ecosystem, with the potential to transform the financial dynamics of the music industry to better support the very artists who breathe life into it. Replacing the inneficient and opaque framework with one that is optimised and transparent, removing excess handling and human interpretation from the processes and relying only on pure, unadulterated, immutable data as the real source of truth.</p><br>
<p>By integrating all elements of music production into the blockchain, the Audionals protocol ensures comprehensive and transparent attribution for every component used in creating a song. This means that not only are composers and sample holders recognized, but so are the contributions of those using specific effects and tools, such as reverb, EQ adjustments, delay, compression, and various synthesizers and other digital instruments. Every modification and effect is recorded with a unique identifier, ensuring that each participant in the creative process, from composers to producers to plugin and instrument creators, receives fair acknowledgment. This innovation fosters a collaborative environment where every detail is tracked and rewarded, enhancing the integrity and richness of the musical landscape. Whether you are a producer, writer, or a music enthusiast, the Audionals protocol opens up a new world of possibilities, ensuring that the full spectrum of creativity involved in making music is visible and valued.</p><br>
<p>The fundamental technology that drives Audionals.com is the inscription of data to the Bitcoin blockchain. Audio data in all its forms, including Base64 embedded JSON files can be inscribed and sequenced into infinite new songs in the future.</p><br>
<p>The use of JSON files makes the audio data more easily indexable and sortable by its ability to hold extensive, user-defined metadata. Metadata such as the audio type, the instrument used, genre, key, BPM, and other user-defined parameters can be added to JSON files, which facilitates searching, categorization, and manipulation of the audio files on the platform. It essentially creates a database of audio files with advanced metadata that are easily searchable and sortable for use in future applications such as the Audional Sequencer that allows the creation of new music using existing inscriptions to save on the cost of on-chain music production and distribution.</p><br>
<p>Audio data in its raw form can also be inscribed and recursively accessed in whole or in part for distribution of future releases or third-party remixes that always access the original file when executed, ensuring that on-chain attribution is as immutable as Bitcoin transactions themselves.</p><br>
<p>The ability to inscribe audio data directly onto the blockchain or to store and access audio from other permanent immutable storage solutions has profound implications for ownership, copyright, authenticity, and control. Once a piece of immutable audio is inscribed or connected to the blockchain, it is permanent. Its inscribed usage cannot be altered or deleted, the user's ownership is transparent, and the original sample owner's rights are upheld if any part of their work is reused in future compositions.</p><br>
<p>Today, there are alternative, permanent data storage solutions available that offer similar levels of permanence and security as Bitcoin without the high cost of inscribing audio directly onto the Blockchain itself. We can leverage the immutability and P2P distribution power of Bitcoin to bridge to other data solutions such as Arweave to get the best of both worlds. 1 GB of permanent, immutable storage space on Arweave costs $10 - for life. This combination of technologies is going to completely reshape the musical landscape in every way from sample creation and usage tracking, collaborative music production including music software distribution and usage tracking for audio processing apps, plug-ins, and instruments like soft synths.</p><br>
<p>The administration of music copyright, ownership, and distribution is being optimized in ways we never dreamed of, providing an indisputable record of participation in the origins of original content. This is not just for the composers but for the producers of every element of a song. Both production and distribution become part of a single technological leap, ensuring that the rights of every participant are upheld from conception to distribution and even beyond.</p><br>
<p>Audionals, in all their forms, audio or code, sound or software, can be subjected to on-chain recursive techniques, pulling together Base64 encoded samples, real audio samples, soft synths, and audio processing plugins in on-chain initiated programmatic signal processes to form new musical creations, enabling users to "record" and then distribute their music directly on-chain to an audience who only need to own a Bitcoin wallet and hold some Bitcoin if they want to engage with their favorite artists.</p><br>
<p>By leveraging audional technology and the immutable nature of the blockchain, musicians can establish permanent, verifiable ownership, distribute their work entirely peer to peer, and track all of its usage with ease. The transparency and traceability offered by audional technology also enables accurate and transparent royalty payment tracking and distribution, ensuring all creators receive recognition and income for their work no matter how small their contribution might be. Unlike Spotify removing payment for songs with fewer than 1000 plays, the Audional vision is one where every single element of a song's production gets full attribution in an environment where this is not only possible but extremely healthy at a grassroots level and promotes greater creative collaboration through guaranteed financial inclusion.</p><br>
<p>Owners of software used in the music creation process can apply new business models based purely on actual usage and financial earnings that their software is a part of rather than complex subscription models that add friction at a grassroots level and earn nothing extra when their software produces big hits. The audional protocol improves efficiency, fairness, and productivity for all participants and allows some previously external yet vital elements of the music creation process to become a visible part of every song that is also included in the financial framework.</p><br>
<p>In essence, Audionals.com represents a novel application of blockchain technology in the realm of audio and music. Its unique approach to audio inscription, coupled with the innovative on-chain composition feature, is poised to disrupt the traditional music industry and empower artists in unprecedented ways. In a world where digital technology continues to reshape the way we create, distribute, and consume music, Audionals.com offers a glimpse into a future where music and blockchain become inextricably linked drawing all participants into the same transparent, data-driven environment where the music really can speak for itself.</p>
</div> -->
<div class="info-content" id="info-content-json" style="display: none;">
<p>The Audionals protocol began as an innovative standard for the indexing and standardisation of audio files inscribed as text strings on the Bitcoin blockchain and has grown to become a cutting-edge standard for bringing a multitude of benefits to the digital creative industries such as music and film.</p><br>
<p>The Audionals protocol introduces a comprehensive JSON structure for capturing every essential detail of a digital audio file incorporating audio and exhaustive metadata into a single, on-chain playable file. From metadata and technical information to contextual insights, preservation history, administrative data, and even user-defined fields, this format provides a unified solution for organising and accessing on-chain audio assets.</p><br>
<p>What truly sets this format apart is the integration of base64 audio-encoding within the JSON file itself. This eliminates the need for separate metadata files when current options are restrictive in standards like mp3, wav, or flac, creating more efficient files for integration into door applications with on-chain capabilities.</p><br>
<p>The Audionals protocol enhances compatibility across diverse platforms, software, and devices. Regardless of the location or tools used, this format guarantees a consistent, hassle-free experience. It ensures that inscribed audio files can seamlessly integrate into various inscribed applications, allowing users to harness their audio resources effortlessly, working entirely on-chain.</p><br>
<p>Audionals establishes a new benchmark for permanent audio file storage and indexing for future access. Organising, categorising, and retrieving audio files becomes effortless with reduced administrative pressure for future users, empowering them with an intuitive system that ensures seamless, perpetual access to immutable audio resources.</p><br>
<p>With UTF-8 encoding, Audionals JSON files not only create a global resource library that transcends language barriers but also provides the tools for preserving our varied and wonderful global linguistic heritage itself. The protocol provides an immutable audio record for an audial seed bank for safeguarding endangered languages, phonetics, and dialects for all of humanity and future generations. A permanent, inclusive repository of audio wonders, for individuals from every corner of the globe to access and learn from. Fostering collaboration, inspiration, and cultural exchange while serving as a catalyst for preserving and revitalizing nearly extinct languages.</p><br>
<p>Embrace the possibilities offered by Audionals and embark on a journey where the potential for audio expression knows no bounds.</p>
</div>
<div class="info-content" id="info-content-donate" style="display: none; text-align: center;">
<button class="close-button" onclick="closeInfo('info-content-donate')">X</button>
<p style="color: gold; font-weight: bold;">Please Donate to Support Ongoing Audionals Research and Development.</p>
<p style="color: rgb(8, 245, 8);">Send donations to jim.btc</p>
<p style="color: orange;">BTC - bc1qxt4w0thady2x3cc370rx0qaau9r25wnun2k5f6</p>
<p style="color: rgb(0, 157, 255);">STX - SP162D87CY84QVVCMJKNKGHC7GGXFGA0TAR9D0XJW</p>
<p style="color: rgb(255, 0, 0);">ORD / RUNES - bc1prlac023zwxjse64pc8txa9hjd3llllvzg672eh40rk632nr2k3usty0e0k</p>
</div>
<!-- <div class="overlay"></div> -->
<h1>Bitcoin Audional Generator</h1>
<main id="app" role="main">
<fieldset class="form-group">
<legend>Select an MP3 or WAV file:</legend>
<div class="input-wrapper">
<input
id="file"
type="file"
class="input-width flashing"
accept=".mp3, .wav"
/>
</div>
</fieldset>
<button id="process">Process Audio File</button>
<section class="row">
<article class="column">
<fieldset class="form-group">
<legend>File Details:</legend>
<div class="input-wrapper">
<label for="audio_type">Audio Type:</label>
<select
id="audio_type"
name="audio_type"
placeholder="E.G. music"
>
<option value="music">Music</option>
<option value="speech">Speech</option>
<option value="nature">Nature</option>
<option value="sfx">Sound Effects (SFX)</option>
<option value="other">Other</option>
</select>
</div>
<div class="input-wrapper">
<label for="creator">Creator's Name:</label>
<input type="text" id="creator" placeholder="E.G. Jim.btc" />
</div>
<div class="input-wrapper">
<label for="fileName">File Name:</label>
<input
type="text"
id="fileName"
readonly
placeholder="E.G. Snare1.wav"
/>
</div>
<div class="input-wrapper">
<label for="duration">Duration (seconds):</label>
<input
type="text"
id="duration"
readonly
placeholder="E.G. 0.300"
/>
</div>
</fieldset>
</article>
<article class="column">
<fieldset class="form-group">
<legend>Music Sample Metadata:</legend>
<div class="input-wrapper">
<label for="instrument">Instrument Group:</label>
<input type="text" id="instrument" placeholder="E.G. Drums" />
</div>
<div class="input-wrapper">
<label for="instrument_specifics">Instrument Specifics:</label>
<input
type="text"
id="instrument_specifics"
placeholder="E.G Snare"
/>
</div>
<div class="input-wrapper">
<label for="key">Key (select from list):</label>
<select id="key" name="key">
<option value="C Major">C Major</option>
<option value="C# Major">C# Major</option>
<option value="D Major">D Major</option>
<option value="D# Major">D# Major</option>
<option value="E Major">E Major</option>
<option value="F Major">F Major</option>
<option value="F# Major">F# Major</option>
<option value="G Major">G Major</option>
<option value="G# Major">G# Major</option>
<option value="A Major">A Major</option>
<option value="A# Major">A# Major</option>
<option value="B Major">B Major</option>
<option value="C Minor">C Minor</option>
<option value="C# Minor">C# Minor</option>
<option value="D Minor">D Minor</option>
<option value="D# Minor">D# Minor</option>
<option value="E Minor">E Minor</option>
<option value="F Minor">F Minor</option>
<option value="F# Minor">F# Minor</option>
<option value="G Minor">G Minor</option>
<option value="G# Minor">G# Minor</option>
<option value="A Minor">A Minor</option>
<option value="A# Minor">A# Minor</option>
<option value="B Minor">B Minor</option>
</select>
</div>
<div class="input-wrapper">
<label for="note">Note (select from list):</label>
<select id="note" name="note">
<option value="C0">C0</option>
<option value="C#0">C#0</option>
<option value="D0">D0</option>
<option value="D#0">D#0</option>
<option value="E0">E0</option>
<option value="F0">F0</option>
<option value="F#0">F#0</option>
<option value="G0">G0</option>
<option value="G#0">G#0</option>
<option value="A0">A0</option>
<option value="A#0">A#0</option>
<option value="B0">B0</option>
<option value="C1">C1</option>
<option value="C#1">C#1</option>
<option value="D1">D1</option>
<option value="D#1">D#1</option>
<option value="E1">E1</option>
<option value="F1">F1</option>
<option value="F#1">F#1</option>
<option value="G1">G1</option>
<option value="G#1">G#1</option>
<option value="A1">A1</option>
<option value="A#1">A#1</option>
<option value="B1">B1</option>
<option value="C2">C2</option>
<option value="C#2">C#2</option>
<option value="D2">D2</option>
<option value="D#2">D#2</option>
<option value="E2">E2</option>
<option value="F2">F2</option>
<option value="F#2">F#2</option>
<option value="G2">G2</option>
<option value="G#2">G#2</option>
<option value="A2">A2</option>
<option value="A#2">A#2</option>
<option value="B2">B2</option>
<option value="C3">C3</option>
<option value="C#3">C#3</option>
<option value="D3">D3</option>
<option value="D#3">D#3</option>
<option value="E3">E3</option>
<option value="F3">F3</option>
<option value="F#3">F#3</option>
<option value="G3">G3</option>
<option value="G#3">G#3</option>
<option value="A3">A3</option>
<option value="A#3">A#3</option>
<option value="B3">B3</option>
<option value="C4">C4</option>
<option value="C#4">C#4</option>
<option value="D4">D4</option>
<option value="D#4">D#4</option>
<option value="E4">E4</option>
<option value="F4">F4</option>
<option value="F#4">F#4</option>
<option value="G4">G4</option>
<option value="G#4">G#4</option>
<option value="A4">A4</option>
<option value="A#4">A#4</option>
<option value="B4">B4</option>
<option value="C5">C5</option>
<option value="C#5">C#5</option>
<option value="D5">D5</option>
<option value="D#5">D#5</option>
<option value="E5">E5</option>
<option value="F5">F5</option>
<option value="F#5">F#5</option>
<option value="G5">G5</option>
<option value="G#5">G#5</option>
<option value="A5">A5</option>
<option value="A#5">A#5</option>
<option value="B5">B5</option>
<option value="C6">C6</option>
<option value="C#6">C#6</option>
<option value="D6">D6</option>
<option value="D#6">D#6</option>
<option value="E6">E6</option>
<option value="F6">F6</option>
<option value="F#6">F#6</option>
<option value="G6">G6</option>
<option value="G#6">G#6</option>
<option value="A6">A6</option>
<option value="A#6">A#6</option>
<option value="B6">B6</option>
<option value="C7">C7</option>
<option value="C#7">C#7</option>
<option value="D7">D7</option>
<option value="D#7">D#7</option>
<option value="E7">E7</option>
<option value="F7">F7</option>
<option value="F#7">F#7</option>
<option value="G7">G7</option>
<option value="G#7">G#7</option>
<option value="A7">A7</option>
<option value="A#7">A#7</option>
<option value="B7">B7</option>
<option value="C8">C8</option>
<option value="C#8">C#8</option>
<option value="D8">D8</option>
<option value="D#8">D#8</option>
<option value="E8">E8</option>
<option value="F8">F8</option>
<option value="F#8">F#8</option>
<option value="G8">G8</option>
<option value="G#8">G#8</option>
<option value="A8">A8</option>
<option value="A#8">A#8</option>
<option value="B8">B8</option>
</select>
</div>
</fieldset>
</article>
<article class="column">
<fieldset class="form-group">
<legend>Additional Details:</legend>
<div class="input-wrapper">
<label for="genre">Genre:</label>
<input type="text" id="genre" placeholder="E.G. Jazz" />
</div>
<div class="input-wrapper">
<label for="isLoop">Is this sample a loop?</label>
<div class="radio-group">
<input
id="isLoopYes"
type="radio"
name="isLoop"
value="Yes"
class="form-control last-input"
/>
<label for="isLoopYes">Yes</label>
<input
id="isLoopNo"
type="radio"
name="isLoop"
value="No"
class="form-control last-input"
/>
<label for="isLoopNo">No</label>
</div>
</div>
<div class="input-wrapper">
<label for="bpm" style="height: 25px">BPM (e.g. 125):</label>
<input
type="number"
id="bpm"
min="0"
max="999"
inputmode="numeric"
pattern="[0-9]{1,3}"
placeholder="E.G. 120"
class="form-control last-input"
/>
<div id="trimInputs" class="hidden"> <!-- Add this wrapper and initially hide it -->
<div class="input-wrapper">
<label for="loopTrimStart" style="height: 25px">Trim start of sample for looping (in seconds) (e.g. -0.125):</label>
<input
type="text"
id="loopTrimStart"
maxlength="6"
oninput="validateInput(this)"
value="-0."
class="form-control last-input"
/>
</div>
<div class="input-wrapper">
<label for="loopTrimEnd" style="height: 25px">Trim end of sample for looping (in seconds) (e.g. -0.125):</label>
<input
type="text"
id="loopTrimEnd"
maxlength="6"
oninput="validateInput(this)"
value="-0."
class="form-control last-input"
/>
</div>
</div>
</fieldset>
</article>
</section>
<script>
function validateInput(input) {
const userInput = input.value;
const decimalPart = userInput.substr(3).replace(/[^\d]/g, '');
if (decimalPart > 999) decimalPart = 999;
input.value = "-0." + decimalPart;
updateLoopTrimValues(); // Update the loopTrimStart and loopTrimEnd values
}
function updateLoopTrimValues() {
var loopTrimStartInput = document.getElementById("loopTrimStart");
var loopTrimEndInput = document.getElementById("loopTrimEnd");
var loopTrimStart = loopTrimStartInput.value ? parseFloat(loopTrimStartInput.value) : 0;
var loopTrimEnd = loopTrimEndInput.value ? parseFloat(loopTrimEndInput.value) : 0;
// Debugging: Output values to the console
console.log("loopTrimStartInput:", loopTrimStartInput.value);
console.log("loopTrimEndInput:", loopTrimEndInput.value);
console.log("loopTrimStart:", loopTrimStart);
console.log("loopTrimEnd:", loopTrimEnd);
// Use the updated loopTrimStart and loopTrimEnd values as needed
console.log("Loop Trim Start:", loopTrimStart);
console.log("Loop Trim End:", loopTrimEnd);
}
document.getElementById("loopTrimStart").onfocus = function () {
this.selectionStart = this.selectionEnd = this.value.length;
};
document.getElementById("loopTrimEnd").onfocus = function () {
this.selectionStart = this.selectionEnd = this.value.length;
};
document.getElementById("isLoopYes").addEventListener("change", function () {
document.getElementById("trimInputs").classList.remove("hidden");
});
document.getElementById("isLoopNo").addEventListener("change", function () {
document.getElementById("trimInputs").classList.add("hidden");
});
</script>
<fieldset class="form-group">
<legend>
User Defined (e.g. additional details not included any of the fields
above)
</legend>
<div class="input-wrapper">
<textarea
id="user-defined"
class="input-width"
placeholder="E.G. Synth loop from Entertainment by Melophonic"
></textarea>
</div>
</fieldset>
<p id="reminder" style="color: grey; font-weight: bold">
Have you filled as many of the fields above as you can?<br />More detail
means better indexing which means more users can find your samples!<br />If
yes, go ahead and:
</p>
<button id="convert">Generate Audional JSON</button>
<button id="startInscriptionProcess" style="display: none">
Start Inscription Process
</button>
<div class="button-wrapper" style="display: flex; justify-content: center; margin-left: -100px;">
<button id="doInscribe" style="display: none;">INSCRIBE</button>
</div>
<output id="json-output"></output>
<!-- create a read only textarea called audional-json -->
<div style="display: flex;">
<pre id="audional-json" readonly style="display: none; width: 50%; height: 300px; font-size: 16px; color: blue; user-select: none;"></pre>
<div id="inscriptionPreviewContainer" style="display: none; width: 50%;">
<article class="column">
<fieldset class="form-group">
<legend>
Check the Inscription Price and Enter your Ordinals Receiving
Address below.
</legend>
<div class="input-wrapper">
<label for="ordinalRecipientAddress" style="color: rgb(255, 153, 0);">Enter the Bitcoin address to receive the audional inscription:</label>
<input
id="ordinalRecipientAddress"
style="background-color: rgb(255, 255, 255); width: 100%; height: 30px; font-size: 16px; color: green; user-select: none;"
/>
</div>
<div class="input-wrapper">
<div class="input-wrapper">
<label for="networkFeeRate" style="color: rgb(255, 166, 0);">Network Fee Rate (sat/vbyte):</label>
<div class="input-wrapper">
<input
id="networkFeeRate"
readonly
style="background-color: rgb(0, 0, 0); height: 30px; font-size: 16px; color: rgb(255, 166, 0); user-select: none; text-align: center; font-weight: bold;"
/>
<span class="unit-label" style="color: rgb(255, 166, 0);">sat/vbyte</span>
</div>
</div>
<div class="input-wrapper">
<label for="estimatedFees" style="color: rgb(255, 166, 0);">Estimated Inscription Price (sats):</label>
<div class="input-wrapper">
<input
id="estimatedFees"
readonly
style="background-color: rgb(0, 0, 0); height: 30px; font-size: 16px; color: rgb(255, 166, 0); user-select: none; text-align: center; font-weight: bold;"
/>
<span class="unit-label" style="color: rgb(255, 166, 0);">sats</span>
</div>
</div>
</fieldset>
</article>
</div>
</div>
<article class="column">
<div class="form-and-qrcode-container"> <!-- Parent div to contain form and QR code -->
<fieldset class="form-group" id="inscriptionInvoiceContainer" style="display: none; width: 50%">
<div class="column-left">
<legend>Invoice/QR Code</legend>
<div class="input-wrapper">
<label for="inscriptionRequestId">Inscription Request ID (Use this ID to check status):</label>
<div class="copy-icon-wrapper">
<input id="inscriptionRequestId" readonly
style="background-color: rgb(160, 160, 160); width: 100%; height: 30px; font-size: 16px; color: blue; user-select: none; text-align: center; font-weight: bold;"
/>
<i class="fas fa-copy copy-icon" onclick="copyToClipboard('inscriptionRequestId')"></i>
</div>
</div>
<div class="input-wrapper">
<label for="invoiceAddress">Invoice Address (Send payment to this address):</label>
<div class="copy-icon-wrapper">
<input id="invoiceAddress" readonly
style="background-color: rgb(160, 160, 160); width: 100%; height: 30px; font-size: 16px; color: blue; user-select: none; text-align: center; font-weight: bold;"
/>
<i class="fas fa-copy copy-icon" onclick="copyToClipboard('invoiceAddress')"></i>
</div>
</div>
<div class="input-wrapper">
<label for="invoiceAmount">Invoice Amount (Sats):</label>
<div class="copy-icon-wrapper">
<input id="invoiceAmount" readonly
style="background-color: rgb(160, 160, 160); width: 100%; height: 30px; font-size: 16px; color: blue; user-select: none; text-align: center; font-weight: bold;"
/>
<i class="fas fa-copy copy-icon" onclick="copyToClipboard('invoiceAmount')"></i>
</div>
</div>
</fieldset>
<!-- This new div will hold the QR code -->
<div id="qrcode-container" style="width: 34%"> <!-- Adjust width as per your needs -->
<div id="qrcode"></div>
</div>
</div>
</article>
</div>
</main>
<!-- include main.js with support for modules -->
<script type="module" src="/js/main.js"></script>
<script src="/js/gammaApi.js"></script>
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
</body>
</html>