Background music in a php/html webpage

Question

I used an iPhone to record a piece of piano music as .m4a format. I would like to chop it and convert it into a suitable format to be used as the background music in a php/html website.

I have the following questions:- 1. what kind of format is the best (e.g. mp3, WAV, etc)? 2. shall I chop the .m4a followed by conversion, or shall I convert it to another format then chop? 3. may I just apply the file in the webpage, to produce a looping effect? but I worry about, after each refresh, the music may play from the beginning which is not desired.

Thanks a lot!!

Answer 1

Generally speaking, it's a bad idea to have looping music on your website. 95% of people that visit websites like to have control over media that is playing. Rather than embedding, it may be a good idea to include a javascript plugin which users can use to control the song's volume and seek position. Most plugins allow you to auto-start a song when the page loads, which would allow you to have the same effect as embedding the song (I still recommend against auto-start, but it's your page).

One plugin that I have used with good success in the past is http://www.jplayer.org. It allows both audio and video playback. It also works with .m4a files so you wouldn't have to convert anything.

If you're wanting to have the music continuously play rather than start over everytime the visitor goes to a new page, you will have to look into using an iframe to hold the contents of your site.

Answer 2

Bear in mind licensing issues restrict the availability of MP3 on all platforms, namely Linux. WAV would be a portable choice, but it would be comparitively huge so might not be ideal for that reason.

Making it loop would be a matter of a simple HTML attribute:

<embed src="bgsound.m4a" autostart="true" loop="true">

If at all possible, why not find a way to get your piano piece into a MIDI file? Presumably it's pure piano music, making MIDI the ideal format for both accuracy and file size (MIDI's are tiny compared to raw waveform formats).

Your other points; it will restart every time the page refreshes. There are ways around that, perhaps the most basic being to put the music in a popup.

Chopping before or after conversion will make negligible difference, if any at all.

Answer 3

What about converting your sound into .mp3 and .ogg and use the audio element in your HTML

<audio autoplay loop>
  <source src="bgmusic.mp3" /> <!-- works on IE9+, FF3.5+, Chrome4+ -->
  <source src="bgmusic.ogg" /> <!-- still needed for Safari 5.1.7, MP3 to OGG online converter here: http://audio.online-convert.com/convert-to-ogg -->
</audio>

See browsers' support for audio element.

About not restarting everytime you change page, deed02392 suggested you a good way: put the music in popup window.