How do I insert mp3 audio files in Dreamweaver CS5?

[Margmeyr]

How do I insert mp3 audio files in Dreamweaver CS5?

Also, do I have to take out all the spaces in the file name?

Thanks!

[Nancy OShea]

It's a good practice to remove  spaces from all your site folder and filenames.

To answer your question about MP3 audio, how many files do you have?  Do you need a player that supports multiple audio files?  Or just a play button?

Nancy O.

Alt-Web Design & Publishing

Web | Graphics | Print | Media  Specialists 

http://alt-web.com/

http://twitter.com/altweb

[Margmeyr]

Thanks for your reply!

I have 4-5 mp3 files.

I discovered how to add a plug-in from the Media:Plugin in Dreamweaver.

But now I want to change the audio clips to NOT start automatically when the page opens.

I want the embedded file to be OFF, and have the user be able to Play it when they want.

Any help would be appreciated!

[Guest]

You can set the "autostart" to false in Parameters, or in code

<embed src="files/song.mp3" width="640" height="32" hidden="false" autostart="false"></embed>

A word of caution. Unless you have arranged to track plays and pay royalties on MP3s and have your paperwork all together for the RIAA, ASCAP and others, you cannot have any audio file on a public website that plays longer than 3o seconds. The only excpetions to this are the few songs that are in the public domain, and songs for which you hold the exclusive copyright, meaning you wrote them and recorded them. Fines can go as high as $100,000 per play per song if they come after you.

[Nancy OShea]

Assuming you have legal rights to use these tracks on the web, a single player that supports playlists would be the cleanest solution. 

Pickle Player supports MP3 files in all web devices (including smartphones):

http://www.pickleplayer.com/examples/

Flash MP3 Players (NOT supported by all web devices)

Wimpy MP3 Player

Premium Beat

10 more free ones

Nancy O.

Alt-Web Design & Publishing

Web | Graphics | Print | Media  Specialists 

http://alt-web.com/

http://twitter.com/altweb

[Steve Zeeeee]

What is the answer to this question?

But now I want to change the audio clips to NOT start automatically when the page opens.

I want the embedded file to be OFF, and have the user be able to Play it when they want.

Any help would be appreciated!

[Nancy OShea]

See my reply to your other post on the same topic.  Use HTML5 <audio>

Nancy O.

[ContextWeaver]

Hi, I tried to choose the "other reply" assuming it is the reply with code to copy paste.  I tried it both with the quotation marks and without the quotation marks. Neither works for me.

I want to build a webpage with lots of simple little players, gradually,  for people to easily sample short clips. I don't want couplex playlist options or scripts. Just the simplest little player possible, (great if it can play on most devices and without special  options for user to learn about).

I have copyright permission from a text author, to include these player, text-to-speech samples of their writings. One of those little boxes with start-stop button, (not to automatically begin when the page opens).

Dreamweaver is supposed to be WYSIWYG for people who don't want to memorize all this code perfection.

Is there a copy paste thing I can paste my mp3 titles into a larger, precise code statement?

It sounded like the original post asked for this, but what am I doing wrong? I I copy paste the suggested text, please.

[Jon Fritz]

A lot has changed online and in DW since this post was started 6 years ago.

It's pretty simple in the latest versions of the program...

Click where you want the audio player to appear

Go to Insert > HTML > HTML5 Audio to add the <audio> tag to your page

Click the speaker icon that appeared in Design View and in the Properties window, add your .mp3 in the Source field

Make sure the Autoplay checkbox is NOT checked

Add a Title and Fallback Text for old browsers

[ContextWeaver]

To Jon Fritz, thanks...

Granted DW5.5 was years ago and furthermore it is a 20+ year old interface, tweaked into 5 years past...

I hope to avoid learning new tricks. I barely learned anything in the last 6 years, avoiding it I should admit. 

[Nancy OShea]

If the code you're using is valid and the path to file on server is correct

<audio controls>

<source src="folder/your_audio_file.mp3" type="audio/mp3"></audio>

it's  possible your server is not configured to support mp3  MIME type.  On Linux servers, you can usually add it to your  server's .htaccess file with this line of code.

AddType audio/mpeg .mp3

[ContextWeaver]

To Nancy OShea

Sorry if this post was attempted already before and duplicates my first post (which now seems absent).

I tried to paste your code into my DW 5.5 webpage, but this does not work.

Here is my webpage start up, which sends viewers to a second "page-window" for each mp3.

http://harmoniouspalette.com/NU~U~U~Ubabes.html

(I see now the title needs fixing , etc...)

I tried the linked html inside my Mac where it does not work, while the current version plays both on web and on my Mac.

Any insights to make this work would be appreciated.  Thanks so much.

[Nancy OShea · Accepted solution]

Copy & paste the correct code below into a new, blank document and save.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>HTML5 Audio Demo</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

</head>

<body>

<h1>Title</h1>

<audio src="http://harmoniouspalette.com/BeginnerNUs.mp3" title="Beginner NUs" controls ></audio>

<h1>Title</h1>

<audio controls src="http://harmoniouspalette.com/ChildVoice-NU-U-U-U.mp3" title="Child Voice NU-U-U-U">

</audio>

</body>

</html>

[ContextWeaver]

Thanks so much Nancy! You made this so easy and your version even looks more crisp than the older play boxes! (Ones which i previously saw around the web).

Kudos to Dreamweaver, with legendary, inner workings, still surviving the major-web-shifts, of 20 years! Thanks also to Adobe for keeping good essentials durable, for spend thrift WYSIWYG users.

If i could please ask one more question concerning an additional problem:

On my 2 browsers, your kindly provided code loads the new update of today. Great.

However i had to scan the menus to locate a "reload button". Otherwise the old html version of 2 weeks ago persisted in my browsers.

Is there a code to paste in the html file, which will tell a visiting user's browser to check for and to download the latest-current -version of the html file?  That is, not to use any earlier saved versions lingering somewhere...  Basically to assure that the latest html file is loaded. I am generally  not concerned that my pages might load slowly, for this assurance. I am far more concerned that my corrected typos and updates are seen immediately.

Your patience is very much appreciated. Bo Atkinson

[Nancy OShea]

ContextWeaver  wrote

Is there a code to paste in the html file, which will tell a visiting user's browser to check for and to download the latest-current -version of the html file? 

That's how browsers work. They cache data in your browser's memory to make web pages load faster.   You can try adding this meta tag  between the <head> tags of your document.  Adjust last modified date and time accordingly.  In theory, the browser will bring up the most recent version of your page either a cached version or the one on your server.

<meta http-equiv="Last-Modified" content="09 January, 2018  22:31:00 GMT">

Expired Caching is best performed in your server's .htaccess file.  This file tells the server how to handle static assets like fonts, images, scripts and CSS styles that rarely change.

## EXPIRES CACHING ##

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType application/vnd.ms-fontobject "access 1 year"

ExpiresByType application/x-font-ttf "access 1 year"

ExpiresByType application/x-font-opentype "access 1 year"

ExpiresByType application/x-font-woff "access  1 year"

ExpiresByType image/svg+xml "access 1 year"

ExpiresByType image/jpg "access 1 year"

ExpiresByType image/jpeg "access 1 year"

ExpiresByType image/gif "access 1 year"

ExpiresByType image/png "access 1 year"

ExpiresByType text/css "access 1 month"

ExpiresByType application/pdf "access 1 year"

ExpiresByType text/x-javascript "access 1 year"

ExpiresByType text/javascript "access 1 year"

ExpiresByType image/x-icon "access 1 year"

ExpiresDefault "access 2 days"

</IfModule>

## EXPIRES CACHING ##

[ContextWeaver]

Nancy,

Appreciating your good will, may i add one more question to this.   Your method worked so well to start the page off with 2 audio files...  I was almost able to continue adding more audios, by copy pasting another one or two at the bottom of page, up until i added a picture, followed by guesses at which code items needed to be where.  Problem is that the "Design" display option - button - does not show how the audio will appear in Dreamweaver, but does show up in the browser and on line.

Bo's 2018 Blog Page

So my question is:

Can you tell me what went wrong? I can live with results as long as i can get some control of pictures, text and audio.

Thanks for that.

I would buy the upgrade if i can get much better WYSIWYG control... Is there a Youtube showing how this is done on Mac, especially a 2001 Mac (with latest O SX).

Bo Atkinson

[Nancy OShea]

For starters, your CSS file is 404 -- not found on server.  So you have an un-styled page.

The 2nd and more telling issue is how you're trying to position elements visually with the TAB key.   The result is a gross misuse of <blockquote> tags in your code.   Blockquotes are for quotations. 

Designing pages for the web is not like word processing.   You cannot use the TAB and SPACEBAR keys as layout devices. 

If you want click & drag web design, look at Adobe Muse which is aimed at non-coders.  If you want to work with code, stick with DW and learn all you can about responsive web design with HTML5 & CSS media queries.  Upgrading to DW CC is not going to make this any less challenging.  Coding skills are mandatory with DW.

Nancy

[ContextWeaver]

Thanks again Nancy, for your patience. Interesting to hear that your browser does not play the mp3s where my browsers do play them...(Errors are a bit scandalous, but people are able to see my work in general).   From my perspective i'm like the tourist in a strange land just trying to get by without mastery of the local language. 

The Muse program looks like a foreign language to study, without certainty of outcomes, for me.

I wish they could have brought back something more like Site Mill of 20+ years ago.

In any case, DW CS 5.5 is still usable, where mp3s play on a separate page.  I will assume your players are just not backward compatible for use in my rambling WYSIWYG style, (as a stranger in a strange land). 

Bo

[Nancy OShea]

ContextWeaver  wrote

Interesting to hear that your browser does not play the mp3s where my browsers do play them..

Huh?  Nowhere did I say the MP3 audios do not play.  I said your CSS file is missing. 

This file right here:

<link href="VectorEquilibriumResonator.html.css" rel="stylesheet" type="text/css">

When I go to the link in my browser, this is what I see.

Nancy