앱인벤터 강좌 - MP3 음악 재생 앱 만들기

이번 앱인벤터 강좌에서는 mp3 음악 파일을 재생시켜 보도록하겠습니다. 앱 인벤터의 player 컴퍼넌트를 이용하여 간단한 음악 파일을 재생시켜 보도록 하겠습니다.



앱 인벤터 MP3 음악 재생 앱 화면 구성하기


팔레트에서 버튼 버튼 3개를 가져다가 화면에 그림과 같이 배치를 먼저 하도록 하겠습니다


Media에 들어가서 Player를 클릭한 다음 드래그하여 화면에 옮겨 놓으면 [보이지 않는 컴포넌트]로 이동됩니다. 배치가 완료 되고 나면 각 버튼을 클릭하여 속성에서 텍스트 글자를 재생, 일시정지, 멈춤으로 텍스트를 변경해 주시고 컴퍼넌트에서 버튼의 이름도 Button1_R, Button1_P, Button1_S로 변경을 해주세요



이제 재생할 음악 파일을 업로드 해야 합니다. 컴포넌트 밑에 있는 Media에서 Uload File 클릭한 다음 [파일선택]을 클릭합니다. 탐색기 창이 나타나면 원하는 음악 파일을 선택하여 업로드 합니다.


파일의 업로드가 끝나면 컴퓨넌트에서 Player1을 선택한 다음 소스에서 방금 업로드한 음악 파일을 선택하고 OK를 눌러주시면 Player1에 선택한 음악파일 지정이 됩니다.




앱인벤터 MP3 음악재생 앱 블록 구성하기


이제 블록을 한번 구성해 보도록 하겠습니다. 먼저 블록으로 이동을 한 다음 뷰 화면에 각각의 버튼을 클릭하여  [when - click] 버튼을 아래 그림과 같이 배치를 해줍니다.


Player1을 클릭해 보면 다양한 속성들을 볼 수 있는데요 우리가 필요한 것은 음악을 재생하고, 일시 정지, 그리고 멈춤 이 3가지 입니다. 여기서 속성의 중간 쯤 보면 Pause, Start, Stop 블록을 볼 수 있는데요 이 블록을 하나 하나 가져다가 해당하는 버튼 블록에 넣어 주도록 합니다.


버튼을 하나 하나 넣어주면 아래와 같이 그림 처럼 될 것입니다. 이제 빌드를 시켜서 재생을 한번 시켜 보세요


프로그램을 실행해 보시면 아시겠지만 재싱 버튼을 누르고 중지 버튼을 누른 다음 재생 버튼을 클릭하면 이어서 음악을 재상하지만 멈춤 버튼을 누른 다음 재생을 하면 음악이 처음부터 재생을 하게 됩니다. 앱인벤터의 장점은 몇 번의 클릭으로 간단하게 앱을 만들 수 있다는 것입니다. 이것으로 이번 음악재생 앱인벤터 강좌를 마치도록 하겠습니다. 여러분들도 재밌는 앱을 한번 만들어 보세요 ^^

댓글(4)

  • 지나가는 학생
    2016.12.13 17:10 신고

    기기 내에 있는 음악파일 선택하게 만들수 없나요?

    • 2016.12.13 19:10 신고

      위에 방법은 버튼을 눌러서 음악을 재생하는 방법을 적은 건데요. 말씀 처럼하려면 앱을 실행하면 자동으로 스마트폰의 mp 파일을 검색하고 음악파일을 리스트 목록으로 옮긴 다음 목록을 클릭하면 음악이 재생하게 만들면 될꺼 같습니다.

      이것도 한번 만들어 보면 좋겠네요. ^^

  • 궁금한게 있는 사람
    2017.06.11 09:46 신고

    안녕하세요! 궁금한게 있어서 글 남깁니다. 플레이어를 1개만 넣는 것이 아니고 여러 개 넣었을 경우에 일시정지 버튼을 누르고 다시 재생을 하려고 하는데, 다시 재생 버튼을 눌렀을 경우에 일시정지 했던 곡만 시작되도록 할 수는 없나요?ㅠㅠ 일시정지 버튼 누르고 나서 다시 재생 버튼을 누르니 모든 플레이어가 동시에 재생되어서요ㅠㅠ

    • 2017.06.11 11:47 신고

      곡 마다 플레이어를 넣고 버튼을만든다면가능할것같은데요 저도 한번 제작해보고 말씀드릴께요^^

Designed by JB FACTORY