Tutorial - Media Player

*Updated to include link to source, images and sounds on my Github repo*

My first Cascades tutorial is about creating a simple Media Player to use for your own custome sound apps. I like the use of dropdowns to choose your own sounds, as the only sample I found online was using system sounds in a drop down I had to play a bit to get what I wanted. Hence this tutorial to make it easier on others. As this is my first tutorial, I am sure I may miss some things (don't crucify me, please). Now, lets get down to business.

I am going to assume you know how to create a new project using the Momentics SDK. We are going to create a new Empty Cascades project. We also need to create two folders in the assets folder one to store the sounds, we will call this "music" and one for our images, we will call this "images".

First thing we want to do is add the media player library. We do this by importing it into our project on the main.qml

//Media Player control Import
import bb.multimedia 1.0

Now we need to add in the media player itself this is done by using an attached object. You will notice this is a simple couple of lines. Everything is commented so I hope it helps you see what I am doing in the end.

Page {
//Attached Objects
attachedObjects: [

MediaPlayer {
//ID of media player
id: myPlayer
//Source of where your media is selected from
//We will use a drop down for this
sourceUrl: soundSelectorDropdown.selectedValue

}
]

Now we need to add our main container and our container that will hold our dropdown list. Notice I added in the layout properties to be stack layout top to bottome and to center the dropdown on the page.

//Main Container
Container {
//Container for dropdown
Container {
layout: StackLayout {
orientation: LayoutOrientation.TopToBottom
}
//Center all components on page
horizontalAlignment: HorizontalAlignment.Center

After that we create the dropdown menu itself this is the actual dropdown and the options we will have to choose from.

DropDown {
id: soundSelectorDropdown //Id that goes in sourceURL
title: "Sounds"

//Next Create List of sounds
Option {
text : "Fan 1"
description : "" //This is optional component
value : "asset:///music/fan1.mp3" //Where the file is located and name of file
}
Option {
text : "Fan 2"
description : ""
value : "asset:///music/fan2.mp3"
}
} //End Drop Down
}//End Drop Down Container

Now we have the dropdown done and the files that we will use. We need to move on to the actual controls for the audio play back. For this wee need three images in the images folder play, pause and stop button images. For the controls we want them to be side by side (left to right) so you will see that commented in the following code.

//Media Player Controls
Container {
//We want these side by side
//So we use a stacklayout orientation left to right
layout: StackLayout {
orientation: LayoutOrientation.LeftToRight
}
horizontalAlignment: HorizontalAlignment.Center
topPadding: 20.0 //Added to give some space

Now to add the buttons:

ImageButton {//Play Button
id: customSoundPlayButton1 //
defaultImageSource: "images/play_btn1.png" //Source where image button is
onClicked: {
myPlayer.play() //Calls our media player and gives command of Play
}
minHeight: 100.0
} // End Play Button

ImageButton { //Pause Button
id: customSoundPlayButton2
defaultImageSource: "images/pause_btn1.png" //Source where image button is
onClicked: {
myPlayer.pause() //Calls our media player and gives command of Pause
}
minHeight: 100.0
}//End Pause Button
ImageButton {
id: customSoundPlayButton3
defaultImageSource: "images/stop_btn1.png" //Source where image button is
onClicked: {
myPlayer.stop() //Calls our media player and gives command of Pause
}
minHeight: 100.0
} //End Stop Button
}//End Media Player Controls Container
} //End Main Container
}

And that is it. We have a completed simple media player to pick and play your own custom sounds within an app. Don't forget to add the following to your .pro file:

LIBS += -lbbmultimedia

Here is the complete code:

// Default empty project template
import bb.cascades 1.0
//Media Player control Import
import bb.multimedia 1.0

// creates one page with a label
Page {
//Attached Objects
attachedObjects: [

MediaPlayer {
//ID of media player
id: myPlayer
//Source of where your media is selected from
//We will use a drop down for this
sourceUrl: soundSelectorDropdown.selectedValue

}
]
//Main Container
Container {
//Container for dropdown
Container {
layout: StackLayout {
orientation: LayoutOrientation.TopToBottom
}
//Center all components on page
horizontalAlignment: HorizontalAlignment.Center
//Create our drop down to hold selections
DropDown {
id: soundSelectorDropdown //Id that goes in sourceURL
title: "Sounds"
//Next Create List of sounds
Option {
text : "Fan 1"
description : "" //This is optional component
value : "asset:///music/fan1.mp3" //Where the fileis located and name of file
}
Option {
text : "Fan 2"
description : ""
value : "asset:///music/fan2.mp3"
}
} //End Drop Down
}//End Drop Down Container

//Media Player Controls
Container {
//We want these side by side
//So we use a stacklayout orientation left to right
layout: StackLayout {
orientation: LayoutOrientation.LeftToRight
}
horizontalAlignment: HorizontalAlignment.Center
topPadding: 20.0 //Added to give some space
ImageButton {//Play Button
id: customSoundPlayButton1 //
defaultImageSource: "images/play_btn1.png" //Source where image button is
onClicked: {
myPlayer.play() //Calls our media player and gives command of Play
}
minHeight: 100.0
} // End Play Button
ImageButton { //Pause Button
id: customSoundPlayButton2
defaultImageSource: "images/pause_btn1.png" //Source where image button is
onClicked: {
myPlayer.pause() //Calls our media player and gives command of Pause
}
minHeight: 100.0
}//End Pause Button
ImageButton {
id: customSoundPlayButton3
defaultImageSource: "images/stop_btn1.png" //Source where image button is
onClicked: {
myPlayer.stop() //Calls our media player and gives command of Pause
}
minHeight: 100.0
} //End Stop Button

}//End Media Player Controls Container
} //End Main Container
}

I hope you enjoyed this tutorial and have learned something along the way. You can of course expand upon this and add a progress bar, and much more. I am not going to get into that now as I wanted this to be a simple tutorial for first timers.

Get source here.

Don Berzley

Co-Founder of OSBB. BlackBerry 10 app developer. Father of a son with Cystic Fibrosis.


Follow Me On Twitter - @BlkScorp33

Check Out My Apps - BlackBerry World

Help Find A Cure For Cystic Fibrosis!

Website: www.teamlorenzo.wordpress.com

Leave your comments

Post comment as a guest

0
  • No comments found
Subscribe to the official OSBB BBM Channel!

osbbchannelQR

C00013E89

Back to top