How to change the state of button to clicked in cocos2d-x

Question

I am pretty new to cocos2d-x.I have created a button and i wanted to change the state of the button when i tap the button . i am having trouble changing the state from play to pause similar to a music player.Below is the code.

 void Gallery::buttonUI(Size visibleSize,Vec2 origin)
    {
        button = Button::create("play.png");
        //button->loadTextures("pause.png","play.png","pause.png");
        button->setPosition(Point((visibleSize.width/2)+origin.x,(visibleSize.height/2)+origin.y-80));
        button->setContentSize(Size(100.0f, button->getVirtualRendererSize().height));
        button->addTouchEventListener([&](Ref* sender, Widget::TouchEventType type){
            switch (type)
            {
                case Widget::TouchEventType::BEGAN:
                    break;

                case Widget::TouchEventType::ENDED:
                    CCLOG("Characters: %c %c", 'a', 65);
                    if (!flag)
                    Gallery::pauseSong();
                    else
                    Gallery::resumeSong();
                    break;
                default:
                break;
            }
        });
        this->addChild(button);
    }

void Gallery::playSong()
{
    CocosDenshion::SimpleAudioEngine::getInstance()->preloadBackgroundMusic("1.mp3");
    CocosDenshion::SimpleAudioEngine::getInstance()->playBackgroundMusic("1.mp3");
    flag = false;
}
void Gallery::pauseSong()
{
    CocosDenshion::SimpleAudioEngine::getInstance()->pauseBackgroundMusic();
    flag = true;
}
void Gallery::resumeSong()
{
    CocosDenshion::SimpleAudioEngine::getInstance()->resumeBackgroundMusic();
    flag = false;
}

Answer 1

I don’t know of such methods for the ui::Button. But I don’t see the use of specific ui::Button items (capinsets, different methods for different touch events etc.) in your method also.
So, I think the MenuItemImage is better in your case:

bool flag = true;
MenuItemImage *button = MenuItemImage::create("play.png", "play_pressed.png", CC_CALLBACK_0(Gallery::playSong, this));
button->setPosition(Vec2((visibleSize.width/2)+origin.x,(visibleSize.height/2)+origin.y-80)); // better is use Vec2, Point can be ambiguous

Menu* menu = Menu::create(button, NULL); // add created button on Menu
menu ->setPosition(0,0);
this->addChild(menu);

And then set the images in handler pressing:

void Gallery::playSong()
{
    if(flag)
    {
        // preload better move to AppDelegate.cpp
        // CocosDenshion::SimpleAudioEngine::getInstance()->preloadBackgroundMusic("1.mp3");
        flag = false;
        CocosDenshion::SimpleAudioEngine::getInstance()->playBackgroundMusic("1.mp3");
        button->setNormalImage(Sprite::create(“pause.png”));
        button->setSelectedImage(Sprite::create(“pause_pressed.png”)); // if you use selected image
    }
    else
    {
        flag = true;
        CocosDenshion::SimpleAudioEngine::getInstance()->pauseBackgroundMusic();
        button->setNormalImage(Sprite::create(“play.png”));
        button->setSelectedImage(Sprite::create(“play_pressed.png”));
    }
}