Skip to content

Categories:

Playing and Looping Audio

I recently completed my first Silverlight animation and I ended up stumbling with playing and looping an MP3 file for the animations background music. My first instinct was to add the MP3 file to the Solution but quickly found that Silverlight doesn't handle media file as an embed asset within its compiled XAP file but as an outside asset.

The Setup

To start, Silverlight requires you to place all media files inside your ClientBin. Here is a look at my projects structure.

/Build/ClientBin/Splash.xap
/Build/ClientBin/English.xap
/Build/ClientBin/French.xap
/Build/ClientBin/Music.mp3
/Build/Index.html
/Build/English.html
/Build/French.html

The XAML

We begin by adding the MediaElement node. Use the x:Name attribute to define its unique name and Source to define our MP3's location; the path is based on our folder structure and if I had my MP3 file within a folder called Media, /Build/ClientBin/Media/Music.mp3, the path would be Source="Media/Sound.mp3".

<MediaElement x:Name="SoundTrack" Source="Music.mp3" />

By default the current XAML will only load our MP3 file with the XAP file so that it is accessible when your Silverlight application or animation starts. In order for us to hear our MP3, we can use the AutoPlay attribute to begin playing once the XAP file has finished loading.

<MediaElement x:Name="SoundTrack" Source="Music.mp3" AutoPlay="True" />

At this point if we build and run our project, we will hear our music playing in the background. If you're following this article with your own files, wait to the end of your track. You will notice that, by default all media files, play once.

Unfortunately XAML does not provide us with an attribute like Loop="True", therefore to accomplish a loop, we must use some C# code.

The Loop

To start, lets add the MediaEnded attribute to our MediaElement node; if you are using Visual Studio 2008 it will auto-compete a value of SoundTrack_MediaEnded and create the method, by the same name, in your C# code. If you are using Expressions Blend 2.5, who does not provide IntelliSense, you will need enter the value yourself and also go into you C# code and add the method SoundTrack_MediaEnded.

XAML

<MediaElement x:Name="SoundTrack" Source="Music.mp3" AutoPlay="True" MediaEnded="SoundTrack_MediaEnded" />

C#

private void SoundTrack_MediaEnded (object sender, RoutedEventArgs e)
{
}

Switch to your C# code and find SoundTrack_MediaEnded. As it stands right now, our XAML knows to call this function when our SoundTrack ends. In order to set a loop for our background music, we will need ensure we seek back to 0 and start its playback again.

private void SoundTrack_MediaEnded (object sender, RoutedEventArgs e)
{
SoundTrack.Stop();
SoundTrack.Play();
}

If you build and run your project, you should have your audio file playing and looping.

The Outro

Make sure you check the documentation for a list all available attributes but one that you may need to use right away is the Volume attribute; uses a value from 0 to 1.

<MediaElement x:Name="SoundTrack" Source="Music.mp3" AutoPlay="True" MediaEnded="SoundTrack_MediaEnded" Volume=".8" />

Posted in Silverlight. Tagged with 3.1, MediaElement, MP3, Silverlight 2.5, Visual Studio 2008, XAML.

By Marlon

December 12, 2008

Replace Your Incandescent Holiday Lights With Seasonal L.E.D. Lights

On the weekend I packed up my old Christmas lights and headed over to The Home Depot as they had a 2 day only Holiday Light Exchange event. The program was simple, bring in your old incandescent light strings and The Home Depot will give you a coupon for 50% off their regularly priced energy efficient Seasonal L.E.D string lights.

An Act of Green was created simply called Replace Your Incandescent Holiday Lights With Seasonal L.E.D. Lights. Although the event is over at The Home Depot, you can still find L.E.D lights at your local hardware store.

Posted in OMAoG. Tagged with Act of Green, OMAoG, One Milion Acts of Green.

By Marlon

November 2, 2008

One Million Acts of Green

Tonight, in partnership with CBC and The Hour with George Stroumboulopoulos, we launched One Million Acts of Green. The project is the brain child of Cisco, the idea behind the campaign is that one small act can make a big difference.

OMAoG is about mobilizing Canadians without overhauling their life; it's about one act from each individual amassing to a million. It can be as one simple as switching to compact fluorescent light bulbs, starting a recycling program, or walking to work. The site targets Canadians but is opened to our friends around the world.

OMAoG includes a green calculator designed by GreenNexxus that determines the impact of those acts on the environment.

One million acts of green, one act at a time.

Posted in Portfolio. Tagged with Act of Green, Empirical, OMAoG, One Milion Acts of Green.

By Marlon

October 21, 2008

Getting Started With phpFlickr

Today we are going to take a look at phpFlickr 2.2.0, a PHP class written by Dan Coulter in PHP4. It acts as a wrapper for Flickr's API and its methods return Flickr's XML response as well structured and simple to read arrays. There is a prerequisite for this article, you will need your own Flickr account and/or your own Flickr API.

The Setup

Our first step is to visit phpFlickr's homepage or its SourceForge project homepage and download the latest version; at the time of this article I downloaded release is 2.2.0. Next, create a root folder for this article, i called mine, Getting Started With phpFlickr, and extract the downloaded file into this folder. Finally, open your favorite editor and create two empty php files, account.php and example.php.
The Setup, Getting Started With phpFlickr

Your Account

Connecting to your Flickr account requires three separate IDs, your API's Key & Secret IDs and your account's User ID. Once you have applied for your own API, Flickr will show you your Key and Secret ID. Your User ID is simply your Flickr web address, http://www.flickr.com/photos/###; if you are like me and created a permanent link to your photostream without writing down that address down, you can use this tool, idGettr - Find your Flickr ID, to get it back. Once you have all three handy, open account.php, create three variables, $_key, $_secret, & $uid , and fill in your accounts' information; save and close your file.

<?php
$_key = ""
$_secret = "";
$_uid = "";
?>

Connecting To Flickr

We are now ready to use the phpFlickr class to connect to our account. Open example.php and, using include_once(), we begin by importing our account.php file and the class files, followed by making the initial connection to our account using the variable $_flickr.

<?php
include_once("account.php");
include_once("phpFlickr-2.2.0/phpFlickr.php");
include_once("phpFlickr-2.2.0/PEAR/HTTP/Request.php");
$_flickr = new phpFlickr($_key, $_secret);
?>

Your Photostream

As I mentioned in the beginning, a nice feature of phpFlickr is how its methods return Flickr's XML response as nice and simply arrays. For example, lets use the phpFlickr method photosets_getList($user_id = NULL) to connect to Flickr's API method, flickr.photosets.getList, who returns a list of each set in your photostream with its ID, description, number of photos and more. We will use the variable $_photosets to hold our array of information and print_r() to display the results.

<?php
include_once("account.php");
include_once("phpFlickr-2.2.0/phpFlickr.php");
include_once("phpFlickr-2.2.0/PEAR/HTTP/Request.php");
$_flickr = new phpFlickr($_key, $_secret);
$_photosets = $_flickr->photosets_getList($_uid);
print_r($_photosets);
?>

Once you are ready, save your file, upload and/or open example.php on your live or local server. If you have entered the correct information inside account.php, you will see something like mine when choosing View Source on your browser.

Array
(
[photoset] => Array
(
[0] => Array
(
[id] => 72157607910181389
[primary] => 2928529397
[secret] => 60a692493f
[server] => 3070
[farm] => 4
[photos] => 2
[videos] => 0
[title] => Baby Myles Alexander
[description] => Pictures of Myles from birth to 12 months
)
)
)

The Outro

This class does require some knowledge of how Flickr's API methods work, what they return and what they require. Thankfully, you can open phpFlickr.php inside our phpFlickr-2.2.0 folder to look at all the methods available in this class. Dan Coulter has commented the associated Flickr API address for you to reference and read more about what that method.

function photosets_getList($user_id = NULL)
{
/* http://www.flickr.com/services/api/flickr.photosets.getList.html */
$this->request("flickr.photosets.getList", array("user_id" => $user_id));
return $this->parsed_response ? $this->parsed_response['photosets'] : false;
}

Posted in PHP. Tagged with API, Flickr, phpFlickr.

By Marlon

October 13, 2008

Local Database

A friend learning PHP, recently asked me how they can mimic a database when the site they are working on does not have access to one. The following will show you how we can use an Array to create a local database and nested Arrays to create tables, rows and columns as key/value pairs.

The Source

The data for today comes from MySQL 5.0 Manual, 3.3.3. Loading Data into a Table.

name	owner	species	sex	birth	death
Fluffy	Harold	cat	f	1993-02-04
Claws	Gwen	cat	m	1994-03-17
Buffy	Harold	dog	f	1989-05-13
Fang	Benny	dog	m	1990-08-27
Bowser	Diane	dog	m	1979-08-31	1995-07-29
Chirpy	Gwen	bird	f	1998-09-11
Whistler	Gwen	bird		1997-12-09
Slim	Benny	snake	m	1996-04-29

The Skeleton

We begin by creating an array that represents our database, $db = array (). We follow that by defining our table, "pets" => array () as key/value pairs. Our tables' name is set as the key and an empty array is set as its value.

<?php
$db = array (
"pets" => array (
)
);
?>

Adding The First Row

Using the data from our source, lets add our first row. Each row will be represented by an array with key/value pairs; the column name of our table is set as the key and the rows value for that column is set as the value..

<?php
$db = array (
"pet" => array (
array (
"name" => "Fluffy",
"owner" => "Harold",
"species" => "cat",
"sex" => "f",
"birth" => "1993-02-04",
"death" => ""
)
)
);
?>

Continue adding the rest of the data from our source. To differentiate each row, ensure you place a comma between each array but not on the last array. Once you are done adding each row, save your file as db.php. Here a quick look at three completed rows.

<?php
$db = array (
"pet" => array (
array (
"name" => "Fluffy",
"owner" => "Harold",
"species" => "cat",
"sex" => "f",
"birth" => "1993-02-04",
"death" => ""
),
array (
"name" => "Claws",
"owner" => "Gwen",
"species" => "cat",
"sex" => "m",
"birth" => "1994-03-17",
"death" => ""
),
array (
"name" => "Buffy",
"owner" => "Harold",
"species" => "dog",
"sex" => "f",
"birth" => "1989-05-13",
"death" => ""
)
)
);
?>

Importing The Data

Now that db.php is ready, lets continue by creating a new file, showPets.php; it will be this file that we will import our database and show its results. Lets begin by importing our database onto our new file, include_once("db.php") and to ensure our array is looking like a database, lets print the results using print_r().

<?php
include_once("db.php");
print_r($db);
?>

View The Results

Upload or if you have a local web server running, open showPets.php with your preferred web browser; i hope your preferred browser is not IE. If you're $db array has no syntax errors, you will see...

Array ( [pet] => Array ( [0] => Array ( [name] => Fluffy [owner] => Harold [species] => cat [sex]
=> f [birth] => 1993-02-04 [death] => ) [1] => Array ( [name] => Claws [owner] => Gwen
[species] => cat [sex] => m [birth] => 1994-03-17 [death] => ) [2] => Array ( [name] => Buffy
[owner] => Harold [species] => dog [sex] => f [birth] => 1989-05-13 [death] => ) [3] => Array
( [name] => Fang [owner] => Benny [species] => dog [sex] => m [birth] => 1990-08-27 [death]
=> ) [4] => Array ( [name] => Bowser [owner] => Diane [species] => dog [sex] => m [birth] =>
1979-08-31 [death] => 1995-07-29 ) [5] => Array ( [name] => Chirpy [owner] => Gwen [species]
=> bird [sex] => f [birth] => 1998-09-11 [death] => ) [6] => Array ( [name] => Whistler [owner]
=> Gwen [species] => bird [sex] => [birth] => 1997-12-09 [death] => ) [7] => Array ( [name] =>
Slim [owner] => Benny [species] => snake [sex] => m [birth] => 1996-04-29 [death] => ) ) )

To view a structured version of the results, go to View Source.

Pages: 1 2 3

Posted in PHP. Tagged with Array, database, MySQL.

By Marlon

September 21, 2008