Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo añadir archivos de audio y crear listas de reproducción en WordPress

Nota editorial: Ganamos una comisión de los enlaces de socios en WPBeginner. Las comisiones no afectan a las opiniones o evaluaciones de nuestros editores. Más información sobre Proceso editorial.

¿Quieres añadir archivos de audio a tu sitio WordPress? Como sistema de gestión de contenidos, WordPress es capaz de gestionar archivos de audio por defecto. Sin embargo, muchos principiantes no son conscientes de ello. En este artículo, le mostraremos cómo añadir archivos de audio y crear listas de reproducción en WordPress.

An audio playlist in WordPress

Formatos de archivo de audio compatibles con WordPress

WordPress utiliza la etiqueta de audio HTML5 para incrustar archivos de audio. Es compatible con la mayoría de los dispositivos modernos y funciona especialmente bien en dispositivos móviles. La etiqueta de audio HTML5 es compatible con los formatos de archivo MP3, OGG y WAV.

MP3 es el formato más utilizado y compatible con archivos de audio, y le recomendamos que lo utilice siempre que sea posible.

Tutorial de vídeo

Subscribe to WPBeginner

Si no te gusta el vídeo o necesitas más instrucciones, sigue leyendo.

Añadir un único archivo de audio en WordPress

Añadir un único archivo de audio o pista de música a cualquier entrada o página de WordPress es muy fácil. Simplemente haga clic en el botón añadir medios en la pantalla de edición de entradas.

Adding an audio file in WordPress post using media uploader

A continuación, aparecerá un mensaje / ventana emergente de subida de medios en su pantalla. Tienes que hacer clic en el botón de subir archivo para seleccionar y subir tu archivo de audio. Una vez subido, haz clic en el botón Insertar en la entrada.

WordPress insertará tu archivo de audio en la entrada. Si estás usando el editor visual de entradas, podrás ver el archivo incrustado en tu entrada. Si está utilizando el editor de texto, entonces verá el shortcode de audio.

Single audio file embedded into WordPress visual editor

Puedes continuar editando tu entrada, o guardarla y publicarla. Una vez publicado, puede obtener una vista previa de su entrada donde verá su archivo de audio incrustado como este.

A single audio file added in a WordPress post

Otra forma más sencilla de añadir un único archivo de audio es subiendo el archivo a la biblioteca de medios. Después, simplemente copia la URL del archivo y pégala en el editor visual.

WordPress incrustará automáticamente la URL por ti. Esto es similar a cómo incrustar vídeos en WordPress, donde sólo tienes que pegar la URL de un vídeo de YouTube y WordPress lo incrustará automáticamente.

Añadir lista de reproducción de audio en WordPress

Al igual que las galerías de imágenes, también puedes añadir listas de reproducción de audio a tus entradas de WordPress utilizando el cargador de medios. Simplemente haga clic en el botón añadir medios para subir sus archivos de audio.

Después de subir los archivos de audio, tienes que seleccionar los archivos que deseas incluir en la lista de reproducción y luego hacer clic en enlazar crear nueva lista de reproducción en la columna de la izquierda.

Creating audio playlist in WordPress

Ahora puedes arrastrar y soltar para reorganizar las canciones en la lista de reproducción. También puedes activar la visualización del nombre de la canción, el nombre del artista y la imagen. Esta información se incrusta con las etiquetas meta IDT de tu archivo MP3 y WordPress la muestra automáticamente.

Playlist Settings

Una vez que haya terminado, simplemente haga clic en el botón insertar lista de reproducción de audio. Tu lista de reproducción se añadirá a tu entrada y podrás verla en el editor visual. Ahora puedes guardar tu entrada y ver previa tu lista de reproducción.

An audio playlist embedded in a WordPress blog post

Edición de la metainformación de archivos de audio en WordPress

WordPress puede obtener automáticamente la metainformación de su archivo MP3. Sin embargo, si su archivo no tiene ninguna información meta, o si desea cambiarla, puede hacerlo en el cargador de medios.

Haz clic en el botón Añadir medios para iniciar el cargador de medios. Puedes subir tu archivo de audio o, si ya lo has subido, hacer clic sobre él en la biblioteca de medios.

Una vez seleccionado el archivo de audio, verás a la derecha la columna de detalles del adjunto. Aquí es donde puede proporcionar el título de la pista, el nombre del artista, el nombre del álbum, la leyenda y una breve descripción de la pista. Esta información se mostrará en las listas de reproducción y en las páginas de archivos adjuntos individuales.

audio-meta-info

Si el archivo de audio que has subido tiene una imagen incrustada para ser usada como portada del álbum, entonces esta imagen será extraída automáticamente por WordPress. Se almacenará en su biblioteca de medios y se utilizará cuando esta pista se añada a una lista de reproducción.

Sin embargo, si su archivo de audio no tiene una imagen de portada, puede editar el archivo en WordPress y subir una imagen. Simplemente vaya a Medios ” Biblioteca seleccione el archivo que desea editar y haga clic en el enlace de edición debajo de él.

Editing an audio file in WordPress

Si está viendo la biblioteca de medios en la vista de cuadrícula, al hacer clic en el archivo de audio se abrirá un mensaje / ventana emergente. Puede enlazar el enlace Editar más detalles en la parte inferior de la ventana emergente para editar el archivo.

Edit more details link

Ahora accederá a la página de edición de medios, donde no solo podrá editar toda la metainformación de su archivo de audio, sino que también podrá subir una imagen destacada. Esta imagen se utilizará cuando el archivo de audio se añada a una lista de reproducción.

Uploading album cover image by editing media file in WordPress

Añadir archivos de audio y listas de reproducción a los widgets de la barra lateral

Por defecto WordPress no incrusta automáticamente URLs de archivos de audio. Primero tenemos que activar la incrustación automática para widgets de texto, y luego tenemos que activar shortcodes. Simplemente pegue este código en el archivo functions.php de su tema o en un plugin específico del sitio.

add_filter( 'widget_text', array( $wp_embed, 'run_shortcode' ), 8 );
add_filter( 'widget_text', array( $wp_embed, 'autoembed'), 8 );
add_filter( 'widget_text', 'do_shortcode');

Ahora puedes subir un archivo a la biblioteca de medios y copiar su URL. Añade un widget de texto a la barra lateral de WordPress y pega la URL dentro de él.

WordPress incrustará automáticamente la URL en el reproductor de medios para reproducir tu archivo de audio.

Para añadir una lista de reproducción, tendrá que utilizar el shortcode [lista de reproducción] con los ID de los archivos de medios que desea incluir en la lista de reproducción.

Primero tendrá que subir los archivos de audio que desea incluir en la lista de reproducción visitando Medios ” Añadir nuevo.

A continuación, deberá editar cada archivo de audio que desee añadir a la lista de reproducción. Simplemente haga clic en el enlace de edición debajo del archivo en la biblioteca de medios o haga clic en el enlace de editar más detalles si está viendo la biblioteca de medios en la vista de cuadrícula.

En la página Editar medios, obtendrá el ID del archivo de medios debajo del campo de título.

Getting the media file ID in WordPress

Ahora que tiene los ID del archivo que desea añadir a la lista de reproducción, puede utilizar el shortcode de la siguiente manera:

No olvide sustituir los ids por sus propios IDs de archivo. Puede utilizar este shortcode en un widget de texto. Así es como se ve en nuestro sitio de prueba:

Adding an audio playlist in WordPress sidebar widget

Esperamos que este artículo te haya ayudado a aprender cómo añadir archivos de audio y crear listas de reproducción en WordPress. También puedes echar un vistazo a nuestra guía sobre cómo iniciar un podcast con WordPress.

Si te ha gustado este artículo, suscríbete a nuestro canal de YouTube para ver tutoriales en vídeo sobre WordPress. También puedes encontrarnos en Twitter y Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

70 comentariosDeja una respuesta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Rachel E says

    Do you recommend optimizing audio files to minimize file size, like is recommended for images?

    Thanks for another informative article!

    • WPBeginner Support says

      We would not normally recommend hosting audio or video on your site and instead embed it from another service but if you do plan to upload the files to your site you would want to optimize them for reduced file size.

      Administrador

  3. Afaque says

    The above screenshots of the wordpress are very old. unable to add playlist in new wordpress interface.

    Can you please guide how to add playlist and also guide, how to allow users to select their own playlist in the wordpress?

    • WPBeginner Support says

      This article was last updated in 2015, we’ll be sure to look into updating this article once we are able :)

      Administrador

  4. Danica says

    This doesn’t work now? Whenever I upload an mp3 single file less than 5mb in size, it says “Sorry, this file type is not permitted for security reasons.”

    How do I fix this?

  5. Joey says

    As of WordPress 5.4, single songs work but I don’t think you can do playlists (unless I’m missing something). I’m guessing it can still be done with HTML though, but an external embed like Sound Cloud might be easier. Just posting this in case someone else is having trouble finding how to make a playlist, so you don’t waste your time.

    • WPBeginner Support says

      Correct, at the moment there is not a playlist block with the block editor, we will be sure to take a look for what we can update with for other options.

      Administrador

  6. Tianna says

    Is it possible to have a playlist on my home page
    I have created it on a new page and it works great just what i want for the home page but can’t seem to make that happen.
    THANKS FOR ANY HELP

    • WPBeginner Support says

      It would depend on your specific theme and if you’re using a static homepage, otherwise you would need to add the playlist to a widget

      Administrador

  7. naijahot says

    how can I upload music for people to download e.g if I upload music once my visitor click download it will start downloading

  8. taylor holden says

    I’ve done all this but my files don’t show attachment_id. its just the file name as i’ve saved it.

    what i was hoping to do was to have a page with lecture notes by topic and this doesn’t seem to work.

    any ideas or am i doing it wrong. no issues adding to the functions.php but i haven’t added a text widget because i don’t want to see the widget on every page.

  9. Cliff says

    I am able to insert an audio file into a post using your above method. It is in a Wav format. However, the audio file will not play in preview. Do I have to actually publish the post for the audio to play?

  10. Yesenia Latorre says

    Hello, I figured out how to add the audio file to both, a post and Footer 1, I actually like it better at the bottom of the page, it was pretty easy to upload, it’s about 3 minutes of a song, however, like your photo above it shows 00:00 and I published it and when i press play, it wont? help? Also, this is my first site, so I haven’t launched it yet, does that have anything to do with it? Also can i make it play automatically whenever someone visits the site?

  11. Natasha Lane says

    Hello,

    I keep following this method to add my audio but it only becomes available as a download and can’t actually be played on my site. Can you tell me why this is?

    Thanks in advance.

  12. Natasha D. Lane says

    Hey, there! I’m an author who is trying to add a short audio recording of my book under each description. I’ve followed the tutorial but the audio player doesn’t pop up. Instead the link just becomes downloadable.

    How can I fix this?

    Thank you.

      • Lynne says

        Great tutorial. Followed it to a “T,” however, files will not load. The files are compatible as they are MP3, and they worked back when I started up my website. Now there is a 2MB limit. Any ideas? All songs are longer than 2MB. It will work in a post, but not as this suggests in a media library. I have not tried a widget playlist as I thought it would do the same. Have tried from both URL and selecting files, but as stated the limit prevents me from adding anything. TIA.

  13. April Perez says

    I need to add a playlist to my website. I am a DJ and need to have brides and friends access playlist and put songs and artists as well as be able to add MP3 files on the list if needed. I need it to be specifically accessible to each party separately. I am not sure which plug in is best. I use WordPress regularly for my website. Can you advise?

  14. Casey says

    What size should the photo be set to so you can see it with correct aspect ratio? It’s only showing me the top 1/3 to 1/2 of my photo.

  15. Marcio Motta says

    I have a blog with a considerable number of visitors and would like to make available an audio version of the posts, that is, all the posts would be reproduced, also, in audio.
    My question is whether this could be characterized in duplicate content for Google.
    Thank you for your response.

  16. Christian Wameh says

    Very good tutorial but i want to know if it is possible to add “download” button on single song and how.

  17. joel says

    I got watched many tutorials on how to add audio and create playlist but I can’t find a tutorial/lesson on how to add download option in the playlist.

  18. Jesse says

    I want to create a playlist as a widget, but the permalinks for my audio files are showing as the artist/song names, not as attachment ids with numbers. Therefore when I want to create a playlist made up of song ids, I’m not sure how to do that. Is there a way to change this or get the id that I’m not seeing?

  19. Randy says

    I host a weekly radio show. For the time being I am using HTML tables to create my playlist. Is there an easier less time consuming way to do this? My radio shows are on my hosting site in mp3 format. Any ideas would be greatly appreciated!!

    I use Google sheets to write out my playlist for a given show and then use the online tool tableizer to convert the text to table. Then I take that code and paste it to my WordPress page. I go through a lot of steps and would love to simplify this process.

    Thanks!!!!

  20. Alison says

    Hello, I’m trying to add an audio playlist (mp3 files) to my homepage in a widget and I’m not able to. I have the Maxwell template. Does this template allow for this function? When I download music files, the “Create Playlist” function doesn’t appear. I’ve also tried installing the Cue plugin, which allows me to put a playlist on a post or a page, but not in a widget on the static homepage. Thanks for any help!

  21. John Stephens says

    This tutorial was awesome. The mp3 file works great on my post page. However it doesn’t work on my site when accessed by an android phone or tablet. It does nothing when clicking the start button, any suggestions?

  22. Steve says

    Hello, can I display the music with a different appearance? Bigger buttons to manage the songs. Another music theme.

  23. francesca says

    hi there,
    is it possible to have one song playing in the entire website, that doesn’t stop and start again the minute I navigate it?

    thanks in advance for your reply! :)
    have a nice day
    best
    francesca

  24. Jill Bedford says

    Is it possible to embed an audioboo link in the free version of wordpress? This is for a not for profit organisation. many thanks
    Jill

  25. Melissa says

    I’m never listening to what WP Beginner says again. I was trying to add a code for different music player as the one I have doesn’t do playlists. It says WordPress can do it itself, so I added what it said where it said and the following happened.

    Adding Audio Files and Playlists to Sidebar Widgets is the bit I added. Now I get this error when trying to do anything on my site

    Parse error: syntax error, unexpected ‘add_filter’ (T_STRING) in /home/user/public_html/example.com/wp-content/themes/mystore/functions.php on line 365

    Just copy and paste that code into the functions.php you said. Great, THANK YOU VERY MUCH.

  26. Mark Bigland-Pritchard says

    I just tried to add 4 audio files to the media library for our site and was refused. It gave a list of acceptable file types, none of which is audio.

  27. Shirley says

    I created this audio play list. Love it. They are fine on website. BUT just found out that they keep looping the first section of audio files when playing on ipad and iphone. Please guide.

  28. Kevin Gilbert says

    I know how to embed the audio player for one song, and then edit it to provide both an mp3 and an ogg file so that the right one plays based on the visitor’s browser. Does anyone know if that’s doable when you’re creating a playlist? I can’t seem to find whether that’s possible or not, and how to do it.

  29. Juksaa says

    How can i add one playlist from own map of my sites ftp, not via media upload to wp?
    how can i play one map, how is link?

  30. eraxe says

    Nice article everything works.

    So I’d like to know if you have an idea how to make the audio files downloadable, probably to insert a download button along the playlist for each track?

    Thanks

  31. Chris Mueller says

    It seems that every time I create a playlist, the audio files can be easily downloaded by users. In the video, it appears that the songs are not downloadable by the viewer. Could someone offer assistance in making these audio files non-downloadable?

    • Sem says

      I have the same problem!
      The playlist shows on the website’s page not with the possibility to play it but download it.
      How can I fix it ?
      Thanks

  32. Angela Bowman says

    Hi, I have definitely used this approach in the past. I am migrating a client from Host Gator to WP Engine and realized they have over 1GB of audio files they are hosting (and streaming of course) on their site. This is a huge bandwidth issue, as you can imagine. Not that the files are access frequently, but it occurred to me that self hosting audio may be just as bad as self hosting video.

    In the past, I’ve hosted the files on Amazon S3 account instead and used an audio streaming plugin to fetch those files. I think that would be a better solution to avoid download/bandwidth issues on the web host.

    However, I’m wondering if an even better solution is to host and stream the files via SoundCloud or similar service, then embed the SoundCloud file on the website?

    I’m trying to assess what is going to allow best performance, reliability, and least bandwidth hit to the WP hosting account.

    Thanks!

  33. erase says

    Take Note: anyone trying to do this, shouldn’t copy and paste the ‘play list’, code rather manually retype it to your own website because the quotation mark here seems to produce a False result. Thank You, it works.

  34. emeka nkeze says

    Love this tutorial. Thanks for sharing. What about adding a playlist from soundcloud or other media sites like hulkshare and reverbnation??

  35. Emily Barney says

    Any guidance on what audio files you can post and which you shouldn’t for copyright reasons? Even some links would be useful.

    It’s very easy to upload files, but it’s also very easy for artist / label / copyright holders to submit a DMCA Takedown notice to your ISP (internet service provider) or hosting service:

    • WPBeginner Support says

      As a general rule of thumb, you should not upload audio files containing the works that you haven’t created yourself. You can create and upload your own audio files, or the audio files that are currently in public domain.

      Administrador

  36. Alpha says

    Great post! Thanks you so much!
    I Have embedded different streaming radios in my site. Selecting them one by one they all play simultaneously. Is it in WordPress a way to automatically close the playing radio on selecting a other one?

  37. Peter says

    Any plug-in suggestions for situations with large size MP3 files that are too big to upload into the Media Library. Rather than music, these are educational lectures. Files sizes around 40 – 45MB

    • Kevin Gilbert says

      Peter, Ask your host to increase your file size upload limit for WordPress. If they won’t or can’t, and it’s something you really need, you might want to change hosts. For one of my client’s sites on WPEngine, they’ve increased our upload size to 200MB. Once a year, we upload about 10 audio files from a conference, and we needed the additional file size settings because the files are usually of one-hour talks, so they’re larger than just your typical audio song file.

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.