MUSICAL-TEXT

♫♫♫♫♫♫♫

GRAB THIS CODE AND RUN OFF LIKE YOU JUST STOLE IT !!!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MUSICAL-TEXT</title><center><p>Type anything and then click play notes. Have fun !!!</p></center>
<style>
body {
background-color: black;
color: white;
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
.random-color {
color: hsl(360 * Math.random(), 100%, 50%);
}
textarea {
width: 80%;
height: 100px;
margin-top: 20px;
}
button {
margin: 5px;
padding: 10px;
cursor: pointer;
}
#notesDisplay {
margin-top: 20px;
font-size: 24px; /* Larger font size for notes display */
}
</style>
</head>
<body>
<h1 class="random-color">MUSICAL-TEXT</h1>
<textarea id="textInput" placeholder="Type your song lyrics here..."></textarea>
<br>
<button id="playButton">Play Notes</button>
<div id="notesDisplay"></div>

<script src="https://cdn.jsdelivr.net/npm/tone"></script>
<script>
const noteMap = {
'A': 'C4',
'B': 'D4',
'C': 'E4',
'D': 'F4',
'E': 'G4',
'F': 'A4',
'G': 'B4',
' ': null // Ignore spaces
};

document.getElementById('playButton').addEventListener('click', async () => {
const inputText = document.getElementById('textInput').value.toUpperCase();
const notes = translateTextToNotes(inputText);
displayNotes(notes);
await playNotes(notes); // Ensure we wait for Tone to start
});

function translateTextToNotes(text) {
return text.split('').map(char => noteMap[char] || null).filter(note => note);
}

function displayNotes(notes) {
const notesDisplay = document.getElementById("notesDisplay");
notesDisplay.innerHTML = "Notes: " + notes.join(' ');
}

async function playNotes(notes) {
try {
await Tone.start(); // Start the audio context
console.log("Audio context started"); // Debug statement
const synth = new Tone.Synth().toDestination();
let time = Tone.now();

notes.forEach(note => {
if (note) {
synth.triggerAttackRelease(note, "8n", time);
time += 0.5; // Space out notes
}
});
} catch (error) {
console.error("Error playing notes:", error); // Error handling
}
}
</script><script src="https://unpkg.com/[email protected]/build/Tone.js"></script>
</body><span class="music-note">♫</span><span class="music-note">♫</span><span class="music-note">♫</span><span class="music-note">♫</span><span class="music-note">♫</span><span class="music-note">♫</span><span class="music-note">♫</span>
</html>