There sure is, and my thanks to Google Plus follower Peter Olsen for this neat solution.
The trick is to recognize that modern HTML5 includes a lot of specialized tags that are recognized by most modern browsers, though not all of 'em. If your audience includes a lot of people using old gear and older operating systems, this might not work, but as you can see below, for newer browsers like Chrome and Safari, there's a lot of additional power under the proverbial hood.
Let's just get this code out of the way, then I'll talk about how to tweak and tune it.
To get a player embedded in your blog or web page when you've already uploaded the MP3 file onto your server and know its URL, use this:
<audio id="audio_with_controls" controls>
<source src="test.mp3" type="audio/mpeg" /></audio>
What's it look like? Here's a sample from a recent blog post here on this site:
Easy enough. Now, what you can you do to tweak and fine-tune it?
Not a lot. Here are your options:
| autoplay | Specifies that the audio will start playing as soon as it is loaded |
| controls | Specifies that audio controls should be displayed (such as a play/pause button etc) |
| loop | Specifies that the audio will start over again, every time it is finished |
| preload | Specifies if and how the author thinks the audio should be loaded when the page loads |
| src | Specifies the URL of the audio file |
In terms of changing the actual buttons and controls that are displayed, that's not something you can do with this particular HTML5 object, so you're up to the mercy of the user's browser. But from experimentation, there's not much variation:
There you have it, copy and paste the code to your heart's content.
Sign up for my weekly AskDaveTaylor Newsletter and you'll receive even more tech and gadget help
right to your inbox, along with exclusive news and industry updates. It's good stuff. I promise!
your boss chud give you a big raise,you diservit,tank you,all be back...