Embed a metronome, a guitar tuner and a piano on your website

You have three widgets to choose from. The first is an online metronome with a tempo range of 20 to 300 BPM, tap tempo, and time signatures 2/4, 3/4, 4/4, 5/4, 6/8, and 7/8. The first beat uses a 1000 Hz click. The others use 800 Hz. This lets you or your student identify the beginning of the measure without relying on a spoken count.

For a guitar exercise, start between 60 and 72 BPM. For a pop or rock pattern in 2/4, use the metronome first with one note per click, then add the syncopation. In a country exercise, the student can tap four beats and check whether the pulse is close to the tempo they intend to study.

The second is an online guitar tuner for standard tuning E2, A2, D3, G3, B3, and E4. It uses the microphone on the visitor's device. The in-tune indication considers a range of ±5 cents, but the result depends on the microphone, the surroundings, the instrument's volume, and how the string was struck. The audio is analyzed in the browser itself and is not sent anywhere else.

The tuner does not replace listening. If the indication fluctuates, move the phone away from the guitar's soundhole, reduce the surrounding noise, and play one string at a time. Wait for the note to stabilize before turning the tuning peg. On guitars with new strings, check again after a few seconds because the tension may change.

The third is a virtual piano with two octaves. When the available space is narrow, it displays one octave. The widget lets you change octaves, use sustain, and play from the computer keyboard when it is focused. It is useful for locating notes, checking intervals, and testing harmony ideas without opening a second page.

You can use the piano to locate the tonic of a key, compare a major third with a minor third, or try a progression such as I–V–vi–IV. In a lesson on MPB, this helps the student hear the function of each chord without reproducing the lyrics or the complete chord chart of a copyrighted work.

These are the tools available for embedding. There is no music catalog, link search, video connection, or audio upload. If you are looking for other tools for a lesson or an article, see all Cantivy tools and choose only what fits the proposed activity.

Start by choosing the widget on this page. Select the tool, width, and language. The generator displays the corresponding iframe code. Copy the entire snippet, including the credit line that appears directly below the widget. Do not change the code's fixed address or remove the allow="microphone" attribute from the tuner.

Next, open the page editor where you want to place the tool and use your platform's custom HTML or embed block. Paste the code into the indicated field, then publish or update the page. Some free platforms do not accept iframe. In that case, the block may be removed, blocked, or displayed as text.

Run this test in three stages. First, save or publish the page. Second, open the address as a visitor instead of remaining only in editing mode. Third, interact with the controls. With the metronome, play along for eight measures and check that the downbeat accent is clear. On the piano, press a computer key when the widget is focused. With the tuner, allow microphone access and play one string at a time.

If the piano does not respond to the keyboard, click the widget before pressing the keys. If the tuner does not show a signal, check the microphone permission, the instrument's volume, and whether HTTPS is being used. If the block appears as text, look on the platform for an option called “Custom HTML,” “Embed Code,” or “Embed.”

The code points to a fixed Cantivy address. If the tool receives improvements, you do not need to replace the snippet you already pasted. To remove the widget, simply delete the code from the page and the associated credit line. Removing it does not alter your site's content.

There are four width options: 100%, 360 px, 560 px, and 800 px. The 100% option is responsive and respects the 800 px limit. Use it when the page is viewed by students on different phones and computers. The fixed options are helpful when you are building a column, an exercise worksheet, or a page with two areas side by side.

Choose 360 px for a narrow column or a page designed for mobile first. Use 560 px for a lesson with text beside or below the tool. Reserve 800 px for a resource page where the widget takes up almost the full width. If you are not sure which one to choose, start with 100% and test it on a screen approximately 360 px wide.

The height is already calculated for each tool. So there is no need to guess a value or create a scrollbar inside the iframe. On a narrow screen, the piano shrinks to one octave. On the metronome and tuner, the controls adjust to the available space.

You can select Portuguese, Spanish, English, Indonesian, French, German, Italian, Russian, Turkish, or Polish. Choose the language with that page's audience in mind. A teacher who gives lessons in Portuguese can keep the controls in that language even when sharing an exercise with a student who lives outside Brazil.

Widget placement changes the experience. Put the metronome near the exercise count-in. Place the tuner next to the explanation of the six strings. Position the piano alongside an interval analysis or a progression such as I–V–vi–IV. On a long page, place a short introduction before the tool and the practice instructions immediately afterward.

For a study worksheet, a functional order is: exercise goal, tool, tempo or key, number of repetitions, and passing criterion. Example: “Play the scale at 60 BPM for four repetitions. Increase to 64 BPM only if there are no interruptions.” This structure gives the student an immediate action and a clear limit.

The tuner needs to hear sound through the microphone on the device used by the person visiting the page. The code already includes allow="microphone". Without this attribute, the browser blocks microphone access inside the widget. The site hosting the tuner must also use HTTPS. On a page without a secure connection, the browser will not make this feature available.

The first time, the browser may display a permission request. The person must allow microphone access to tune the guitar. If they decline, the rest of the page remains available, but the tuner receives no signal. It also helps to close apps that are using the microphone and play one string at a time, with the instrument near the device.

On mobile phones, place the device approximately 20 to 50 centimeters from the guitar. Avoid resting the phone against the instrument’s soundboard. On computers, use the microphone selected by the browser and reduce nearby sources of noise, such as a television, fan, or another person playing.

The sound is analyzed in the browser itself and is not sent anywhere. Even so, the result does not replace a laboratory measurement. The tuner depends on the microphone in the phone, tablet, or computer, the ambient noise, and how the string is played. For a stable reading, wait for the note to stop fluctuating and make small adjustments at the tuning peg.

The detected pitch is an estimate. The tuner may confuse one note with another in noisy environments or display an unstable reading. If the indication seems an octave higher or lower, check the selected string and play it again. The reading of an open string should not be treated as an exact measurement on every device.

Explain this to the student before the exercise. In an online classroom, ask them to check that the security lock appears in the browser, allow microphone access, and play E2, A2, D3, G3, B3, and E4 separately. If there are questions about data and permissions, consult the privacy policy.

A simple activity starts at 60 to 72 BPM. Ask the student to play one note per click for four measures. Then switch to 3/4 and play three attacks per measure. The 1000 Hz click on the first beat helps the student notice where the cycle starts again. For a pop or rock exercise, you can use 2/4 and ask the right hand to maintain the pulse before adding the syncopation.

To turn this into a 10-minute task, use three blocks. In the first, the student plays four measures with one note per click. In the second, they repeat the same figure in 3/4. In the third, they maintain the pulse and add a chord change every four measures. Write down the starting tempo and the final tempo to compare in the next lesson.

Tap tempo helps approximate the tempo of a song the student already knows. They can tap four times along with the pulse of a pop or country song and check the displayed number. Then adjust the BPM to a comfortable value. If the playing stalls, reduce it by 8 to 12 BPM. Once it becomes consistent, increase it by 4 BPM at a time.

The tempo detected by tap tempo is a reference point. Four taps can produce half or double the intended BPM, especially when the student marks only one side of the pulse. Compare the number with the feel of the meter and correct it with one tap before starting the exercise.

The piano helps with listening and pitch-location activities. Ask the student to find the tonic, major third, and fifth within one octave. In a lesson on MPB, you can compare the I–V–vi–IV movement without writing out the full chord chart of a copyrighted work. Then the student plays each chord on the piano and identifies whether the third is major or minor.

You can also set up a worship music exercise in four stages: locate the tonic, play the fifth, alternate between the major and minor third, and repeat the progression in another octave. In sertanejo repertoire, use the piano to compare the tonic bass with the fifth bass. In pagode, ask the student to keep the metronome at 2/4 while identifying the lowest note of each chord.

For guitar lessons, combine the three widgets. First, the student uses the tuner to check all six strings. Then they set the metronome to 70 BPM and play a simple strumming pattern. Finally, they find the notes of the scale or the bass notes of a progression on the piano. This sequence separates tuning, time, and harmonic awareness, three tasks that often become mixed together when a student begins playing.

The widget contains no ads, visit counter, cookies, or third-party scripts. It loads only the tool page, the font, and the cantivy.com script. This keeps the practice area focused on the metronome, tuner, or piano controls.

Students do not need to create an account, provide an email address, or enter a key. Teachers do not need to manage a user list either. Simply open the published page and use the tool. In the tuner, the only specific permission is microphone access, requested by the browser to analyze sound on the device itself.

The widget does not promise to work without an internet connection. It runs in the browser with the page open and needs to load Cantivy resources. Availability also depends on the connection and the rules of the platform where you pasted the code. If the block does not appear, check whether the platform accepts an iframe, whether the page address was published correctly, and whether a security policy has blocked the embedded content.

If the goal is to offer a practice tool, describe the task on the page itself. Include the tempo, time signature, number of repetitions, and what the student should listen for. Do not present the widget as a music search, storage, or processing service, because it does not perform those functions.

Use is free, requires no registration, and needs no key. The condition is keeping the “by Cantivy” credit. The code already includes a link inside the widget and a line of text directly below it. This credit identifies the tool’s source and must remain visible on the published page.

Do not edit the fixed iframe address to hide the credit, change the source, or insert your own scripts inside the widget. You can choose the width, language, and location where the tool appears. You can also remove everything at any time by deleting the code from the page.

If your editor adds styles around the widget, leave enough space for the credit line. In a 360 px column, check that the text is not cut off. After publishing, open the page in a private window or another browser to check how it appears to visitors who are not logged in to the dashboard.

The code was designed to remain valid as long as the tool’s address is available. Improvements may be added to the widget without requiring you to replace the embedded code. Even so, test the page after making changes to your theme, editor, or the platform’s security rules.

To review the complete rules, read the terms of use. If the code does not load, the credit appears incorrectly, or you encounter a situation that is not explained here, contact us and send the address of the page where you tried to embed the tool.

You can place three music tools directly on your own page: a metronome, a guitar tuner, and a virtual piano. Students can practice without being sent to another site.

The main point is to copy the code generated on this page, paste it into a custom HTML or embed block, and test it as a visitor. The first publication usually requires only choosing the width, language, and widget location.

• Choose the widget and configure its width, language, and tool before copying the code.
• Use HTTPS on the site that hosts the tuner, and keep allow="microphone" in the iframe.
• Start timing exercises between 60 and 72 BPM, and increase the tempo in small steps.
• Use tap tempo as a reference, and check that the value has not appeared at half or double the intended pulse.
• Use the piano to locate notes, intervals, and progressions such as I–V–vi–IV.
• Test the widget on the published page, not only in the platform editor.
• Keep the credit “by Cantivy” and the line of text below the widget.
• Delete the code from the page if you want to remove the tool.