Using sound effects in QML-Devotional songs chanting application

Comments

Thp4 - Some improvement suggestions

In no particular order:

1. The Qt 4.7 import is unnecessary if you import QtQuick 1.0
2. Learn how property bindings work in QML
3. Please properly indent the code to make it easier to read
4. Move the code from the buttons' onClicked handler into a function and call it from there with +1 or -1 as parameter to avoid code duplication
5. Conversion from numbers to strings is automatic in JS - you can use someNumber + '.jpg' and you will get a string
6. If you just flip between two items, you can use "newValue = 1 - oldValue" to flip between 0 and 1
7. Ideally, you would use a property to store the current value (0 or 1) and bind the source property for Image and Audio from there

   thp4 17:40, 3 September 2011 (EEST)

Hamishwillee - Feel free to make the changes yourself

Hi Tom

Thanks for the suggestions - they're all good. If you are inclined and mindfreak hasn't made the changes in a couple of days, feel free to make them yourself. Even if you don't your comment is helpful because others are less likely to learn from errors in the code.

Regards

Hamish

hamishwillee 04:22, 5 September 2011 (EEST)

Hamishwillee - Mindfreak made some updates

Thanks very much! These have fixed some or all of the issues thp4 pointed to.

hamishwillee 04:58, 6 October 2011 (EEST)

Mind freak - Changes are welcomed

Thank you tph4 and hamishwillee for suggestion.

i think i have not yet covered all the points by tph4, but will try to do as soon as possible..

mind_freak 08:11, 6 October 2011 (EEST)

Log in or Join to leave comments.

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

Article Metadata

---

Code Example

Source file: Media:chantingquick.zip

---

Tested with

SDK: Qt SDK 1.1.3

Devices(s): E7

---

Compatibility

Platform(s): Symbian

---

Article

Keywords: Button,SoundEffect,Sound,Play,Multimedia,JavaScript,Image

Created: mind_freak (10 Jun 2011)

Last edited: hamishwillee (13 Jun 2012)

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

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.

• QtQuick: http://doc.qt.nokia.com/4.7/qtquick.html
• Getting started: Getting Started with Qt Quick and the Qt SDK v1.1
• Tutorial: http://developer.qt.nokia.com/wiki/Qt_Quick_Tutorial (seems to be still in development)
• QML Elements Reference: http://doc.qt.nokia.com/4.7-snapshot/qdeclarativeelements.html
• QML presentations in : Qt Developer Days Videos and Qt Developer Days Talks

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