×
Namespaces

Variants
Actions

Using sound effects in QML-Devotional songs chanting application

From Nokia Developer Wiki
Jump to: navigation, search

This very basic app uses QML soundEffects element from QtMultimedia 1.1.

Article Metadata
Code ExampleTested with
Devices(s): E7
Compatibility
Platform(s): Symbian
Symbian
Article
Keywords: Button,SoundEffect,Sound,Play,Multimedia,JavaScript,Image
Created: mind_freak (10 Jun 2011)
Last edited: hamishwillee (13 Jun 2012)

Contents

Theoretical concept

In this application Three buttons are their, pressing Next and Previous will lead to next or previous photo loaded with new devotional song. For playing Devotional songs click Play button. A JavaScript(logic.js) Function is initiated from QML file(main.qml) and that specific function returns the Numeric value and as per the number the Image and music is loaded.

ScreenShot

Chanting1.JPG Chanting2.JPG


JavaScript File

logic.js

var a=0 //GlobalVariable
var hex1=new Array("0","1") // Global Array
function pic() {
return hex1[a]
}

QML UI

So here is the starting point to make a Button Bar

Button.qml

import QtQuick 1.0 
Rectangle {
id: container
 
property string text: "Button"
 
signal clicked
 
width: buttonLabel.width + 30; height: buttonLabel.height + 15
border { width: 1; color: Qt.darker(activePalette.button) }
smooth: true
radius: 8
gradient: Gradient {
GradientStop {
position: 0
color: "#000000"
}
 
GradientStop {
position: 0.87
color: "#ffffff"
}
 
GradientStop {
position: 0.84
color: "#ffffff"
}
 
GradientStop {
position: 0.88
color: "#ffffff"
}
 
GradientStop {
position: 0.99
color: "#000000"
}
}
 
// color the button with a gradient
 
MouseArea {
id: mouseArea
anchors.fill: parent
onClicked: container.clicked();
}
 
Text {
id: buttonLabel
anchors.centerIn: container
color: activePalette.buttonText
text: container.text
}
 
 
states: State {
name: "pressed"; when: mouseArea.pressed == true
PropertyChanges { target:container; opacity:0.4}
}
}

This seems to be easy enough,I have created a Custom button code where the width and height of button depends of Button label And with a fix radius and with a state to show a kind of effect when button is pressed. A Signal is implemented to confirm the pressing of button.

Now coming to the main screen.

As this application Reclangle with three buttons are implemented,a system palette is implemented to give native look to the buttons in the application. Next and Previous button is their to load new image with the songs related to that god image.

Main.qml

import QtQuick 1.0 
import "logic.js" as Logic //Method of importing JavaScript file to your project
import QtMultimediaKit 1.1 // Using Multimedia kit
Rectangle {
 
id: screen
width: 490; height: 720
property bool enabled : false
SystemPalette { id: activePalette }
 
function updateData(text)
 
{
if(text=="1")
{
Logic.a-=1
if(Logic.a<0){
Logic.a=Logic.hex1.length-1
 
}
image1.source = Logic.pic()+".jpg"
playMusic.source = Logic.pic()+".wav"
console.log(playMusic.source)
 
}
else if(text=="0")
{
Logic.a+=1
if(Logic.a==Logic.hex1.length)
Logic.a=0
 
image1.source = Logic.pic()+".jpg"
playMusic.source = Logic.pic()+".wav"
console.log(playMusic.source)
 
}
else
{ console.log("No Action")
 
}
}
 
Item {
width: parent.width
anchors { top: parent.top; bottom: toolBar.top }
 
SoundEffect {
id: playMusic
loops: SoundEffect.Infinite
}
 
Image {
id: image1
x: 0
y: 0
width: parent.width
height:parent.height
source: Logic.pic()+".jpg"
playMusic.source=Logic.pic()+".wav"
 
}
 
}
 
Rectangle {
id: toolBar
width: parent.width; height: 40
color: activePalette.window
anchors.bottom: screen.bottom
opacity: 100
 
Button {
id: previousButton
width: 78
height: 34
anchors { left: parent.left; verticalCenter: parent.verticalCenter }
text: "Previous"
onClicked: {
 
updateData(1);
 
}
}
Button {
id: nextButton
x: 424
y: 2
width: 67
height: 36
anchors { right: parent.right; verticalCenter: parent.verticalCenter }
text: "Next"
 
onClicked: {
 
updateData(0);
}
}
 
Button {
id: play1
x: 154
y: 2
width: 67
height: 36
text: "Play"
onClicked: {
 
playMusic.play()
 
}
}
}
 
}

Source Code

The result is here : File:Chantingquick.zip

References

To get started you need the Qt SDK 1.1 Technology preview and you can download it from this link

Some Documentations and Tutorials I found useful.

Functionality To Be Developed Further

  1. Muting the play
  2. Volume Adjusting
  3. Stop Button
  4. A bit of furnishing the bottom button bar
  5. Exit Button
This page was last modified on 13 June 2012, at 10:58.
50 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×