1. Crear una cuenta en Cloudinary
Si a煤n no tienes una cuenta en Cloudinary, ve a cloudinary.com y crea una cuenta gratuita.
2. Obtener tus credenciales de API
Una vez que te registres, ve a tu panel de control y busca las credenciales de la API. Necesitar谩s el Cloud Name, API Key y API Secret para poder interactuar con la API de Cloudinary.
3. Subir el archivo MP3 usando JavaScript
Puedes usar JavaScript para hacer la carga de archivos MP3 a Cloudinary. Aqu铆 te mostramos un ejemplo b谩sico:
Pasos:
- Incluir la biblioteca de Cloudinary en tu archivo HTML:
- Escribir el c贸digo para subir el archivo:
<script src="https://upload.widget.cloudinary.com/global/all.js"></script>Ejemplo de c贸digo:
// Inicializa Cloudinary
cloudinary.setCloudName('TU_CLOUD_NAME');
// Configura el widget de subida
const widget = cloudinary.createUploadWidget({
cloudName: 'TU_CLOUD_NAME',
uploadPreset: 'TU_UPLOAD_PRESET', // Este preset lo puedes crear en el panel de Cloudinary
resourceType: 'auto' // Esto permite subir im谩genes, videos o audios autom谩ticamente
}, (error, result) => {
if (!error && result && result.event === "success") {
console.log("Archivo subido con 茅xito: ", result.info.secure_url);
alert("¡El archivo ha sido subido exitosamente!");
}
});
// Activar el widget al hacer clic en el bot贸n
document.getElementById("upload_button").addEventListener("click", function() {
widget.open();
});
Este c贸digo abrir谩 un widget en el que puedes seleccionar tu archivo MP3. Al subirlo, Cloudinary te proporcionar谩 la URL segura del archivo.
4. Verificar el archivo subido
Una vez que el archivo se haya subido correctamente, podr谩s acceder a 茅l usando la URL que Cloudinary te proporcionar谩. El archivo estar谩 disponible para ser utilizado en tus proyectos web.
5. Usar el archivo MP3 en tu sitio web
Una vez que el archivo est茅 en Cloudinary, puedes incrustarlo en tu p谩gina web usando una etiqueta de audio HTML, como se muestra a continuaci贸n:
<audio controls>
<source src="URL_DEL_ARCHIVO_MP3">
Tu navegador no soporta el elemento de audio.
</audio>
¡Ya has subido tu archivo MP3 a Cloudinary! Si tienes alguna duda, visita la documentaci贸n oficial.
Enlaces 煤tiles
Si necesitas m谩s informaci贸n, visita los siguientes enlaces:
