簡易ミュージックアプリ

簡易ミュージックアプリ

アンドロイドアプリ作成の「複数のバックミュージック再生」を解説しているページです。
アンドロイドアプリの作り方「簡易ミュージックアプリ」
  • 内  容 :複数曲の再生と停止 「バックミュージックの再生」の続編
  • 難 易 度 :★★★★☆ ( 未経験者の理解、応用は難しいので、再現できるを目指す )
  • 予備知識 :変数、メソッド、IF関数、IDの理解、XML
  • 注  意 :開発ソフトのバージョンやPCの環境によって正常に機能しないときがあります。
  • 補  足 :2015/02/11現在、Android StudioとEclipseの両方で対応。
  1. はじめに → YouTube
  2. 素材の用意 → YouTube
  3. レイアウト作成 → YouTube
  4. 画像の変更 → YouTube
  5. 1曲の再生と停止 → YouTube
  6. 複数曲の再生と停止 → YouTube
  7. Android Studioで復習 → YouTube
動画で学ぶアンドロイドアプリ 【簡易ミュージック】 jazz
jazz(停止中)
動画で学ぶアンドロイドアプリ 【簡易ミュージック】 lock
lock(停止中)
動画で学ぶアンドロイドアプリ 【簡易ミュージック】 pops
pops (停止中)
動画で学ぶアンドロイドアプリ 【簡易ミュージック】 jazz2
jazz2 (再生中)
動画で学ぶアンドロイドアプリ 【簡易ミュージック】 lock2
lock2 (再生中)
動画で学ぶアンドロイドアプリ 【簡易ミュージック】 pops2
pops2 (再生中)

利用サイト様 :Music is VFR

mp3ファイルを3曲用意してください。
極端に長い曲、短い曲、容量の大きい曲以外でしたら問題ありません。
フォルダ名、ファイル名は全て小文字で以下と全く同じにしてください。

  • raw (フォルダ)
    • jazz.mp3
    • lock.mp3
    • pops.mp3
アンドロイドアプリの作り方-【-簡易ミュージックアプリ-】-保存場所
保存場所

※ ファイル名、フォルダ名は完全に一致してください。1文字でも違うとエラーです。

アプリ名[Eclipseの場合]
エクリプスの場合

アプリ名[アンドロイドスタジオの場合]
アンドロイド スタジオの場合
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/pops"
        android:src="@drawable/pops"
        android:layout_weight="1"
        android:scaleType="centerCrop"
        android:onClick="pops"/>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/lock"
        android:src="@drawable/lock"
        android:layout_weight="1"
        android:onClick="lock"
        android:scaleType="centerCrop" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/jazz"
        android:layout_gravity="center_vertical"
        android:src="@drawable/jazz"
        android:layout_weight="1"
        android:onClick="jazz"
        android:scaleType="centerCrop" />

</LinearLayout>

XMLの解説図です。詳しくは動画をご覧ください。

アンドロイドアプリの作り方【ミュージックアプリ】XML解説
XML解説
package com.test.soundtest;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.View; // インポート
import android.widget.ImageView; // インポート


public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    /* ******************************************
    * クリック処理 (pops画像)
    ****************************************** */
    public void pops(View v) {
        // 画像の変更
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops2);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz);
    }

    /* ******************************************
    * クリック処理 (lock画像)
    ****************************************** */
    public void lock(View v) {
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock2);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz);
    }

    /* ******************************************
    * クリック処理 (jazz画像)
    ****************************************** */
    public void jazz(View v) {
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz2);
    }
}

注意点!!

サンプルを適切にコピペすることで動作しますが・・・・意外と難しいです。

1文字違い、1行違うだけでアウトです。
以下を意識しながら確してください。

  • 記載場所 : {}や;より前か後ろか?
  • 文字の違い : 大文字と小文字 、全角と半角
  • コピー範囲  : 最後の;が入っているか?
  • ファイル名  : ファイル名、フォルダ名が1文字でもちがうと正常に動作しません
package com.test.soundtest;

import android.media.MediaPlayer;    // 再生の準備
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.View; // インポート
import android.widget.ImageView; // インポート


public class MainActivity extends ActionBarActivity {

    // 再生の準備   //////////////////////
    MediaPlayer p;  // 再生に必要なファイルの読み込み

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    /* ******************************************
    * クリック処理 (pops画像)
    ****************************************** */
    public void pops(View v) {
        // 画像の変更
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops2);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz);

        // 再生中なら停止
        if (p != null && p.isPlaying()) {
            p.stop(); // 停止
            p.release();// メモリの解放
        }

        // mp3の読み込み
        p = MediaPlayer.create(getApplicationContext(), R.raw.pops);
        p.setLooping(true);  // 連続再生設定
        p.start(); // 再生
    }

    /* ******************************************
    * クリック処理 (lock画像)
    ****************************************** */
    public void lock(View v) {
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock2);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz);
    }

    /* ******************************************
    * クリック処理 (jazz画像)
    ****************************************** */
    public void jazz(View v) {
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz2);
    }

    /* ******************************************
    * アプリの終了
    ****************************************** */
    @Override
    protected void onDestroy() {
        super.onDestroy();
        // クリア可能か確認
        if (p != null) {
            p.release();// メモリの解放
            p = null; // 最初に読み込んだファイルのクリア
        }
    }
}

package com.test.soundtest;

import android.media.MediaPlayer;    // 再生の準備
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.View; // インポート
import android.widget.ImageView; // インポート


public class MainActivity extends ActionBarActivity {

    // 再生の準備   //////////////////////
    MediaPlayer p;  // 再生に必要なファイルの読み込み

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    /* ******************************************
    * クリック処理 (pops画像)
    ****************************************** */
    public void pops(View v) {
        // 画像の変更
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops2);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz);

        // 再生中なら停止
        if (p != null && p.isPlaying()) {
            p.stop(); // 停止
            p.release();// メモリの解放
        }

        // mp3の読み込み
        p = MediaPlayer.create(getApplicationContext(), R.raw.pops);
        p.setLooping(true);  // 連続再生設定
        p.start(); // 再生
    }

    /* ******************************************
    * クリック処理 (lock画像)
    ****************************************** */
    public void lock(View v) {
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock2);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz);

        if (p != null && p.isPlaying()) {
            p.stop();
            p.release();
        }
        p = MediaPlayer.create(getApplicationContext(), R.raw.lock);
        p.setLooping(true);
        p.start();
    }

    /* ******************************************
    * クリック処理 (jazz画像)
    ****************************************** */
    public void jazz(View v) {
        ((ImageView) findViewById(R.id.pops)).setImageResource(R.drawable.pops);
        ((ImageView) findViewById(R.id.lock)).setImageResource(R.drawable.lock);
        ((ImageView) findViewById(R.id.jazz)).setImageResource(R.drawable.jazz2);

        if (p != null && p.isPlaying()) {
            p.stop();
            p.release();
        }

        p = MediaPlayer.create(getApplicationContext(), R.raw.jazz);
        p.setLooping(true);
        p.start();
    }

    /* ******************************************
    * アプリの終了
    ****************************************** */
    @Override
    protected void onDestroy() {
        super.onDestroy();
        // クリア可能か確認
        if (p != null) {
            p.release();// メモリの解放
            p = null; // 最初に読み込んだファイルのクリア
        }
    }
}