Qt Mp3 Player

1

Qt MP3 PLAYER

Qt MP3 PLAYER 1.เมอท ำกำรตดตงโปรแกรม Qt Creator เสรจแลว กจะม Icon แสดงขนมำท Desktop 1.1 ดบเบลคลกท Icon เพอเขำสโปรแกรม

2.เมอเขำสโปรแกรมใหคลกปม New Project

2.1 จะมหนำ New Project เดงขนมำ 2.2เลอก Application 2.3 เลอก Qt Widgets Application 2.4 กดปม Choose..

2.1

2.3

2.2

2

Qt MP3 PLAYER

3. Qt Widgets Application (Location) 3.1 ตงชอไฟลโปรแกรม 3.2 เลอกพำรทบนทกไฟลโปรแกรม 3.3 กดปม Next

4. Qt Widgets Application (Kits) 4.1 กดปม Next

4.1

3.1

3.2

3.3

3

Qt MP3 PLAYER

5. Qt Widgets Application (Detials) 5.1 Base class เลอก QDialog 5.2 กดปม Next

6. Qt Widgets Application (Summary) 6.1 กดปม Finish

6.1

5.1

5.2

4

Qt MP3 PLAYER

7.เขำสหนำ Project 7.1 โปรแกรมจะเปดไฟล dialog.cpp ขนมำกอนเสมอ

7.1

5

Qt MP3 PLAYER

8. เปดไฟล .pro ดวยกำรดบเบลคลกท Icon MiniMp3Player.pro 8.1 ท ำกำรเพมโมดล multimedia เขำไปในบรรทดท 8

8.2 ท ำกำรคอมไพลโปรแกรมกอนหนงครง ดวยกำรกดท Icon รปคอน (ดำนลำงซำย) เพอใหโปรแกรมท ำกำรเพมไลบรำลตำงๆทเกยวกบ โมดล multimedia เขำมำในโปรแกรม

8

8.1

8.2

6

Qt MP3 PLAYER

9. เปดไฟล .h ดวยกำรดบเบลคลกท Icon dialog.h 9.1 ท ำกำรเพมไลบรำล QMediaPlayer เขำมำในโปรแกรม ดงบรรทดท 5 9.2 ท ำกำรเพมไลบรำล QUrl เขำมำในโปรแกรม ดงบรรทดท 6 (ใชในกำรอำงองถงไดเรกทอรไฟล)

9.2 9.1 9

7

Qt MP3 PLAYER

10.ท ำกำรประกำศตวแปรพอยตเตอร player ใหท ำงำนรวมกบคลำสของ QMediaPlayer ดงบรรทดท 21

10

8

Qt MP3 PLAYER

11. ดบเบลคลกท Icon dialog.ui เพอท ำกำรสรำง ui (user interfaces)

11

9

Qt MP3 PLAYER

12.เขำสหนำ UI ใหท ำกำรเพมเครองมอ Herizontal Slider เขำมำในพนท จ ำนวน 2 ตว 12.1 ตวท 1 ท ำหนำทเลอน Scoll เพลง 12.2 ตวท 2 ท ำหนำท เพม – ลด เสยงเพลง

12.21

12.1

คลกลำกมำวำงไดเลยนะครบ

10

Qt MP3 PLAYER

13. คลกท Herizontal Slider อนท 1 13.1 ท ำกำรเปลยนชอ เปน Slider_progress

13.1

13

11

Qt MP3 PLAYER

14. คลกท Herizontal Slider อนท 2 14.1 ท ำกำรเปลยนชอ เปน Slider_volume

14

14.1

12

Qt MP3 PLAYER

15.ท ำกำรเปลยนคำ Value เปน 100 (เพอก ำหนดใหเสยงเพลงมคำเรมตน และ ระดบควำมดงสงสดท 100)

คลก

15

13

Qt MP3 PLAYER

16.ท ำกำรเพมเครองมอ PushButton เขำมำในพนท จ ำนวน 2 ตว - ตวท 1 ท ำหนำท เรมเลน เสยงเพลง - ตวท 2 ท ำหนำท หยดเลน เสยงเพลง 16.1 คลกทปม PushButton ตวท 1

16.2 ท ำกำรเปลยนชอ เปน PushButton_start

16.1

16.2

คลกลำกมำวำงเลยครบ

14

Qt MP3 PLAYER

17. คลกทปม PushButton ตวท 2 17.1 ท ำกำรเปลยนชอ เปน PushButton_stop

17.

17.1

15

Qt MP3 PLAYER

18. ดบคลกทปม PulhButton ตวท 1 18.1 ท ำกำรเปลยนขอควำมเปน Start

19. ดบคลกทปม PulhButton ตวท 2 19.1 ท ำกำรเปลยนขอควำมเปน Stop

18.1

19.1

16

Qt MP3 PLAYER

20.ท ำกำรเพมเครองมอ label เขำมำในพนท จ ำนวน 2 ตว - ตวท 1 แสดงขอควำม Progress - ตวท 2 แสดงขอควำม Volume 20.1 คลกทปม label ตวท 1

20.2 ท ำกำรเปลยนชอ เปน label_progress

20.1

20.2

คลกลำกมำวำงเลยครบ

17

Qt MP3 PLAYER

21 คลกทปม label ตวท 2 21.1 ท ำกำรเปลยนชอ เปน label_volume

22. ดบคลกท label ตวท 1 22.1 ท ำกำรเปลยนขอควำมเปน Progress

21

21.1

22.1

18

Qt MP3 PLAYER

23. ดบคลกท label ตวท 1 23.1 ท ำกำรเปลยนขอควำมเปน Volume

23.1

19

Qt MP3 PLAYER

24.คลกขวำทเครองมอ Slider_progress 24.1 เลอก Go to slot…

24.2 หนำ Go to slot เลอก sliderMoved(int)

24

24.1

24.2

20

Qt MP3 PLAYER

24.3 โปรแกรมกจะพำมำยงหนำ dialog.cpp 24.4 โปรแกรมกจะท ำกำรสรำงฟงกชน void Dialog::on_Slider_progress_sliderMoved(int position) ใหอตโนมต ตงแตบรรทดท 16-19

25.คลกขวำทเครองมอ Slider_volume 25.1 เลอก Go to slot…

24.3 24.4

25

25.1

21

Qt MP3 PLAYER

25.2 หนำ Go to slot เลอก sliderMoved(int)

25.3 โปรแกรมกจะพำมำยงหนำ dialog.cpp 25.4 โปรแกรมกจะท ำกำรสรำงฟงกชน void Dialog::on_Slider_volume_sliderMoved(int position) ใหอตโนมต ตงแตบรรทดท 21-24

25.2

25.3

25.4

22

Qt MP3 PLAYER

26.คลกขวำทเครองมอ pushButton_start 26.1 เลอก Go to slot…

26.2 หนำ Go to slot เลอก click()

26

26.1

26.2

23

Qt MP3 PLAYER

26.3 โปรแกรมกจะพำมำยงหนำ dialog.cpp 26.4 โปรแกรมกจะท ำกำรสรำงฟงกชน void Dialog::on_pushButton_start_clicked() ใหอตโนมต ตงแตบรรทดท 26-29

27.คลกขวำทเครองมอ pushButton_stop 27.1 เลอก Go to slot…

26.3

26.4

27

27.1

24

Qt MP3 PLAYER

27.2 หนำ Go to slot เลอก click()

27.3 โปรแกรมกจะพำมำยงหนำ dialog.cpp 27.4 โปรแกรมกจะท ำกำรสรำงฟงกชน void Dialog::on_pushButton_stop_clicked() ใหอตโนมต ตงแตบรรทดท 31-34

27.3

27.4

27.2

25

Qt MP3 PLAYER

28.เปดไฟล .h ดวยกำรดบเบลคลกท Icon dialog.h 28.1 จะเหนไดวำ

ฟงกชน void Dialog::on_pushButton_start_clicked() และ ฟงกชน void Dialog::on_pushButton_stop_clicked() ทถกสรำงขนโดยอตโนมตในไฟล dialog.cpp เชนเดยวกน กจะมกำรสรำงโปรโตไปท ของฟงกชน

นนๆ ใหอตโนมตเหมอนกนทไฟล dialog.h (ดงบรรทดท 25 และ 27) 28.2 ประกำศโปรโตไทป เพมขนมำ 2 ฟงกชน ดงบรรทดท 30 และ 31

28.2

28.1

26

Qt MP3 PLAYER

29.ลำกเมำสทค ำสง on_position แลวคลกขวำ 29.1 เลอก Refactor - > Add Defintion dialog.cpp เพอท ำกำรสรำงฟงกชน void Dialog::on_position(quint64 position) ใหอตโนมต ในไฟล dialog.cpp

29

29.1

27

Qt MP3 PLAYER

29.2 โปรแกรมกจะพำมำยงหนำ dialog.cpp สงเกตไดวำมฟงกชน void Dialog::on_position(quint64 position) เพมขนมำใหอตโนมต ดงบรรทดท 38 – 41

29.2

28

Qt MP3 PLAYER

30.ลำกเมำสทค ำสง onduration แลวคลกขวำ 30.1 เลอก Refactor - > Add Defintion dialog.cpp เพอท ำกำรสรำงฟงกชน void Dialog::on_duration(quint64 position) ใหอตโนมต ในไฟล dialog.cpp

30

30.1

29

Qt MP3 PLAYER

30.2 โปรแกรมกจะพำมำยงหนำ dialog.cpp สงเกตไดวำมฟงกชน void Dialog::on_duration(quint64 position) เพมขนมำใหอตโนมต ดงบรรทดท 43 – 46

30.2

30

Qt MP3 PLAYER

31. ท ำกำรเพมค ำสง player->setMedia(QUrl::fromLocalFile("C:\\Users\\SoC-Rmutt\\Desktop\\1.mp3")); player->play();

เขำไปในฟงกชน void Dialog::on_pushButton_start_clicked() ดงบรรทดท 35 และ 36 - โดยค ำสงในบรรทดท 35 จะเปนกำรตงคำใหเปดเพลงตำมไดเรกเทอรทเรำก ำหนดไว - โดยค ำสงในบรรทดท 36 จะเปนกำรสงใหเลนเพลงตำมไดเรกทอรทเรำก ำหนดไว

32. จะรไดอยำงไรวำ เพลงขอเรำอยในไดเรกทอรอะไร ? 32.1 ใหคลกขวำทเพลง -> เลอก Properties

31

32.1

31

Qt MP3 PLAYER

32.2 หนำ Properties เลอกแทป Security 32.3 ให coppy ไดเรกทอรตรง Object name ไปใสใน โปรแกรมของเรำ

32.4 สงเกตไดวำกำรไดเรกทอรทเรำ คดลอกมำจะมกำรแบงโฟลเดอรดวยเครองหมำย \ แคตวเดยว ถำเรำจะน ำไปใสในโปรแกรมของเรำ ใหเครอง \ เพมไปอก 1 ตว ดงภำพ(บรรทดท 35) เนองจำกกำรเขยนโปรแกรมภำษำ C++ ใน Qt น จะมองเหนเครองหมำย \ ทอยภำยใน Double code (“…”) ได ตองใสเครองหมำย \ 2 ตวครบ

32.4

32.3

32.2

32

Qt MP3 PLAYER

33. ท ำกำรเพมค ำสง player = new QMediaPlayer(this); connect(player,&QMediaPlayer::positionChanged,this,&Dialog::on_position); connect(player,&QMediaPlayer::durationChanged,this,&Dialog::on_duration);

ลงไปในบรรทดท 10 - 11

33

33

Qt MP3 PLAYER

34.ท ำกำร คอมไพลโปรแกรม (คลกท Icon รปคอน ดำนลำงซำย) 35.ท ำกำร รนโปรแกรม (คลกท Icon รปสำมเหลยมสเขยว ดำนลำงซำย) 36.เมอโปรแกรมรนขนมำ ทดสอบกดปม Start จะมเสยงเพลงดงขนมำ

36 35 34

34

Qt MP3 PLAYER

37.ท ำกำรเพมค ำสง player->stop(); (ท ำหนำทสงใหหยดเลนเพลง) เขำไปในฟงกชน void Dialog::on_pushButton_stop_clicked() ดงบรรทดท44

38.ท ำกำร คอมไพลโปรแกรม (คลกท Icon รปคอน ดำนลำงซำย) 39.ท ำกำร รนโปรแกรม (คลกท Icon รปสำมเหลยมสเขยว ดำนลำงซำย) 40.เมอโปรแกรมรนขนมำ ทดสอบกดปม Start จะมเสยงเพลงดงขนมำ 41.เมอโปรแกรมรนขนมำ ทดสอบกดปม Stop เสยงเพลงกจะหยด

41 39 38 40

37

35

Qt MP3 PLAYER

42.ท ำกำรเพมค ำสง ui->Slider_progress->setValue(position); เขำไปในฟงกชน void Dialog::on_position(quint64 position) ดงบรรทดท 51 -- ท ำหนำทใหเครองมอ Slider_progress ขยบไปทำงขวำทละนด ตำมเพลงทเลน (อธบำยตำมควำมเขำใจนะครบ) 43. ท ำกำรเพมค ำสง ui->Slider_progress->setMaximum(position);เขำไปในฟงกชน void Dialog::on_duration(quint64 position) ดงบรรทดท 56 -- ท ำหนำทค ำนวณระยะเวลำของเพลงวำมเทำไหร เพอจะใหเครองมอ Slider_progress เลอนไปตำมควำมยำวของเพลงไดถกตอง (อธบำยตำมควำมเขำใจนะครบ)

42

43

36

Qt MP3 PLAYER

44. เพมค ำสง player->setPosition(position); เพมเขำไปในฟงกชน void Dialog::on_Slider_progress_sliderMoved(int position) ดงบรรทดท 26 -- ท ำหนำทใหเครองมอ Slider_progress ขยบไปทำงขวำทละนด ตำมเพลงทเลน (อธบำยตำม

ควำมเขำใจนะครบ)

45. เพมค ำสง player->setVolume(position); เพมเขำไปในฟงกชน void Dialog::on_Slider_volume_sliderMoved(int position) ดงบรรทดท 32 -- ท ำหนำทใหเครองมอ Slider_Volume ควบคมระดบควำมดงของเสยงเพลง

44

45

37

Qt MP3 PLAYER

46.ท ำกำร คอมไพลโปรแกรม (คลกท Icon รปคอน ดำนลำงซำย) 47.ท ำกำร รนโปรแกรม (คลกท Icon รปสำมเหลยมสเขยว ดำนลำงซำย) 48.เมอโปรแกรมรนขนมำ ทดสอบกดปม Start จะมเสยงเพลงดงขนมำ 49.เมอโปรแกรมรนขนมำ ทดสอบกดปม Stop เสยงเพลงกจะหยด 50. เมอโปรแกรมรนขนมำ ทดสอบเลอนเครองมอ Slider_Progress เพลงจะขำมไปยงเวลำตำงๆ 51. เมอโปรแกรมรนขนมำ ทดสอบเลอนเครองมอ Slider_Volume เสยงเพลงกจะมระดบควำมดงตำมทเรำเลอน

47

51

50

49 46

48

38

Qt MP3 PLAYER

สดนถาอยากน า แอพทพฒนาเสรจแลวไปใชงานในเครองอนๆ ใหท าการ Deploy กอน ตามนเลยครบ http://www.myconfix.com/blog/tutorial/%E0%B8%A1%E0%B8%B7%E0%B8%AD%E0%B9%83%E0%B8%AB%E0%B8%A1%E0%B9%88%E0%B8%AB%E0%B8%B1%E0%B8%94-qt-%E0%B8%95%E0%B8%AD%E0%B8%99-deploy-qt-program-%E0%B9%83%E0%B8%99%E0%B9%80%E0%B8%84%E0%B8%A3%E0%B8%B7 ดำวนโหลดโปรแกรม Qt ไดท http://www.qt.io/download-open-source/#section-2 Ref. : https://www.youtube.com/watch?v=PutunNtVpto เขำมำรวมกลมกบเรำไดท

OpenQt

https://www.facebook.com/groups/865489750211411/?fref=ts

Innovation Startup

https://www.facebook.com/groups/1603142046584186/?fref=ts

เอกสารฉบบนแจกฟร แชร และ แจก ตามอธยาศยเลยคราบบ

Cr. [email protected]