当前位置：网站首页>Summer challenge brings you to play harmoniyos multi terminal piano performance

Summer challenge brings you to play harmoniyos multi terminal piano performance

2022-07-04 23:57:00 【51CTO】

This article is participating in the starlight project 3.0— Summer Challenge

Preface

If you want to play sweet music, why don't you have a piano , Code to realize your playing wish , Soft power program, little brother, take you hand-in-hand to code and make a piano , Pop up the song you want with your mobile phone , It is not a problem for multiple mobile phones to play at the same time .

Project introduction

The project mainly adopts HarmonyOS Cross end migration ,Fractio Wait to realize piano 88 The keys are divided into seven areas, which flow to different devices to play the corresponding audio . The traditional solid piano has three sound zones , Divided into nine groups , As shown in the figure below ：
# Summer Challenge # Take you around HarmonyOS Multi end piano performance _ Soft power
The project is in the equipment A The piano keys in a group of small characters in the midrange area are initially displayed on the , Click the flow button to pop up the three tone area , Seven ranges for users to choose , After the user confirms the selected range , On the premise of meeting the constraints and limitations of circulation characteristics , That is, on the device B Show the selected range on , And the device A,B It can be operated independently , They don't influence each other .
# Summer Challenge # Take you around HarmonyOS Multi end piano performance _ Soft power _02
After entering the project , Show a group of small characters in the piano midrange , As shown in the figure below :

Seven white buttons and five black buttons , A group of corresponding audio corresponding to the small characters in the middle tone area , Multiple keys can trigger audio playback at the same time .

1. Flow button

Click the flow button , A pop-up box for selecting the range will pop up , The options have a total of three ranges , They are bass areas 、 Midrange 、 treble .
# Summer Challenge # Take you around HarmonyOS Multi end piano performance _ Hongmeng _04
Select OK , The flow equipment selection box will pop up , Click the corresponding device name , When selecting the range , The selected corresponding range flows to the device B, As shown in the figure below ：
# Summer Challenge # Take you around HarmonyOS Multi end piano performance _OpenHarmony_05
equipment B Show ,A The selected device corresponds to the range , The flow button changes to flow .

If in the equipment B Click the transferred button , The exit flow pop-up box will pop up , As shown in the figure below :
# Summer Challenge # Take you around HarmonyOS Multi end piano performance _ Soft power _07
If cancel is selected , The pop-up box disappears , No change of interface , Touch and click the area outside the pop-up box , The pop-up box will also disappear .

If you choose OK , equipment B Exit circulation .

2. Range selection button

Click the range selection button , There are three zones in total for the meeting options , They are bass areas 、 Midrange 、 treble , The second level option of bass area is big character two 、 A group of ; Big block ; The second level option of the midrange area is small words 、 A group of small characters 、 Two groups of small characters ; The secondary options in the high range are three groups of small characters , Small four 、 Five groups , The default is midrange , A group of small characters , As shown in the figure below ：
# Summer Challenge # Take you around HarmonyOS Multi end piano performance _ Hongmeng _09
Select OK , Select the corresponding range , The current range interface of the device will become the selected range , For example, choose small character four , Five ranges , At the same time, click the range selection button again , The default selection is changed to small four 、 Five groups , Corresponding to the current selection , As shown in the figure below :
# Summer Challenge # Take you around HarmonyOS Multi end piano performance _OpenHarmony_10

3. Piano key press trigger effect

①. White button E Trigger effect , As shown in the figure below :

# Summer Challenge # Take you around HarmonyOS Multi end piano performance _ Soft power _12

②. Black button d1m Trigger effect , As shown in the figure below ：

# Summer Challenge # Take you around HarmonyOS Multi end piano performance _ Soft power _13

③. Multi finger key trigger effect , As shown in the figure below ：

# Summer Challenge # Take you around HarmonyOS Multi end piano performance _ Hongmeng _14

Logic implementation

One ： Development steps of circulation related functions :

1. Create... In the project MainAbility To realize IAbilityContinuation Interface , Besides , Still need to be in MainAbility Of onStart() in , call requestPermissionsFromUser() Method to apply for permission .

    @Override
    public void onStart(Intent intent) {
	WindowManager.getInstance().getTopWindow().get().setStatusBarColor(ConstantUtils.COLOR_DEFAULT);// Set status bar color 
         super.onStart(intent);
         super.setMainRoute(MainAbilitySlice.class.getName());
         requestPermission();
    }
    // Request permission 
    private void requestPermission() {
        String[] permission = {
                "ohos.permission.servicebus.ACCESS_SERVICE",
                "ohos.permission.DISTRIBUTED_DATASYNC",
                "ohos.permission.GET_DISTRIBUTED_DEVICE_INFO",
                "ohos.permission.KEEP_BACKGROUND_RUNNING"};
        List<String> applyPermissions = new ArrayList<>();
        for (String element : permission) {
            if (verifySelfPermission(element) != 0) {
                if (canRequestPermission(element)) {
                    applyPermissions.add(element);
                }
            }
        }
        requestPermissionsFromUser(applyPermissions.toArray(new String[0]), 0);
    }

    @Override
    public boolean onStartContinuation() {  return true;}
    @Override
    public boolean onSaveData(IntentParams intentParams) { return true; }

    @Override
    public boolean onRestoreData(IntentParams intentParams) { return true; }

    @Override
    public void onCompleteContinuation(int i) {}
}


     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.
      18.
      19.
      20.
      21.
      22.
      23.
      24.
      25.
      26.
      27.
      28.
      29.
      30.
      31.
      32.
      33.
      34.
      35.
      36.
      37.

2. In the corresponding config.json Declare the permission of cross end migration access ：
ohos.permission.DISTRIBUTED_DATASYNC, stay config.json The configuration in ：

3. stay MainAbilitySlice Realize the page of piano keys in , The code logic is MainAbilitySlice To realize , The code example is as follows ：

@Override
public void onStart(Intent intent) {
    super.onStart(intent);
    super.setUIContent(ResourceTable.Layout_ability_main);
    // Get screen width 
    windowWidth = WindowUtil.getWindowWidth(getContext());
    initView(); // Initialize view 
    startLocalAudioPlay();
initFraction();// initialization Fraction
}

     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.

4. Bind the click event to the flow key , Click the flow button to pop up the range selection box , After determining the selected range , Pop up the device selection box ： The code example is as follows ：

    SelectRangeDialog selectRangeDialog = new SelectRangeDialog(this);
    selectRangeDialog.show();
    selectRangeDialog.setResultListener((regionValue, groupValue) -> {
        selectRegionValue = regionValue;
        selectGroupValue = groupValue;
        switch (selectRegionValue) {
            case ConstantUtils.BASS_AREA:
                setSelectResult(0, ConstantUtils.RANGE_ONE, 1, ConstantUtils.RANGE_TWO);
                break;
            case ConstantUtils.ALTO_SECTION:
                if (selectGroupValue == 0) {
                    selectRangeResult = ConstantUtils.RANGE_THREE;
                } else setSelectResult(1, ConstantUtils.RANGE_FOUR, 2, ConstantUtils.RANGE_FIVE);
                break;
            case ConstantUtils.TREBLE:
                setSelectResult(0, ConstantUtils.RANGE_SIX, 1, ConstantUtils.RANGE_SEVEN);
                break;
        }
        getDevices();
    });
}
private void getDevices() {
    if (devices.size() > 0) {
        devices.clear();
    }
    devices.addAll(deviceInfoList);
    showDevicesDialog();
}



     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.
      18.
      19.
      20.
      21.
      22.
      23.
      24.
      25.
      26.
      27.
      28.
      29.
      30.

5. According to the equipment list, all qualified equipment can be displayed in the equipment pop-up window , For user selection , The equipment list adaptation code is as follows ：

    private static final int SUBSTRING_START = 0;
    private static final int SUBSTRING_END = 4;
    private final List<DeviceInfo> deviceInfoList;
    private final Context context;

    public DevicesListAdapter(List<DeviceInfo> deviceInfoList, Context context) {
        this.deviceInfoList = deviceInfoList;
        this.context = context;
    }

    @Override
    public int getCount() {
        return deviceInfoList == null ? 0 : deviceInfoList.size();
    }
    @Override
    public Object getItem(int position) {
        return Optional.of(deviceInfoList.get(position));
    }
    @Override
    public long getItemId(int position) {
        return position;
    }
    @Override
    public Component getComponent(int position, Component component, ComponentContainer componentContainer) {
        ViewHolder viewHolder = null;
        Component mComponent = component;
        if (mComponent == null) {
            mComponent = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_item_device_list, null, false);
            viewHolder = new ViewHolder();
            if (mComponent.findComponentById(ResourceTable.Id_device_name) instanceof Text) {
                viewHolder.devicesName = (Text) mComponent.findComponentById(ResourceTable.Id_device_name);
            }
            if (mComponent.findComponentById(ResourceTable.Id_device_id) instanceof Text) {
                viewHolder.devicesId = (Text) mComponent.findComponentById(ResourceTable.Id_device_id);
            }
            mComponent.setTag(viewHolder);
        } else {
            if (mComponent.getTag() instanceof ViewHolder) {
                viewHolder = (ViewHolder) mComponent.getTag();
            }
        }
        if (viewHolder != null) {
            viewHolder.devicesName.setText(deviceInfoList.get(position).getDeviceName());
            String deviceId = deviceInfoList.get(position).getDeviceId();
            deviceId = deviceId.substring(SUBSTRING_START, SUBSTRING_END) + "******"
                + deviceId.substring(deviceId.length() - SUBSTRING_END);
            viewHolder.devicesId.setText(deviceId);
        }
        return mComponent;
    }

    private static class ViewHolder {
        private Text devicesName;
        private Text devicesId;
    }
}


     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.
      18.
      19.
      20.
      21.
      22.
      23.
      24.
      25.
      26.
      27.
      28.
      29.
      30.
      31.
      32.
      33.
      34.
      35.
      36.
      37.
      38.
      39.
      40.
      41.
      42.
      43.
      44.
      45.
      46.
      47.
      48.
      49.
      50.
      51.
      52.
      53.
      54.
      55.
      56.
      57.

6. According to the selected equipment B Of Id, The selected range can be displayed on the device , And use according to conditions Fraction Replace equipment A A group of ranges of upper small characters , It can also operate piano keys , The sample code is as follows ：

    new SelectDeviceDialog(this, devices, deviceInfo -> {
        saveDevices.add(deviceInfo.getDeviceId());
        // Cross end migration 
        continueAbility(deviceInfo.getDeviceId());
    }).deviceShow();
    if (isTag) {
        // Replace the current layout 
        try {
            ReplaceCurrentLayout();
        } catch (Exception e) {
            e.printStackTrace();
        }
        isTag = false;
    }
}


     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.

7.FA Cross end migration of also involves the transfer of state data , Need to achieve IAbilityContinuation Interface , In order to realize the management ability of specific events in the migration process , The code example is as follows ：

// Start migration  AbilitySlice You can return without default true
	@Override
	public boolean onStartContinuation() {
	    return true;
	}
	@Override
	public boolean onSaveData(IntentParams intentParams) {
	    intentParams.setParam("data", "remote");
	    intentParams.setParam(ConstantUtils.RANGE_RESULT, selectRangeResult);
	    return true;
	}
	@Override
	public boolean onRestoreData(IntentParams intentParams) {
	    //  Distal FA Migrate the status data from 
	    data = intentParams.getParam("data").toString();
	    selectRangeResult = 		 	   	  	  	Integer.parseInt(intentParams.getParam(ConstantUtils.RANGE_RESULT).toString())
	   return true;
	}
	@Override
	public void onCompleteContinuation(int i) {
	}
	// Remote termination 
	@Override
	public void onRemoteTerminated() {
	    IAbilityContinuation.super.onRemoteTerminated();
	}
	@Override
	protected void onActive() {
	    super.onActive();
	}
	@Override
	protected void onStop() {
	    super.onStop();
	}
}


     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.
      18.
      19.
      20.
      21.
      22.
      23.
      24.
      25.
      26.
      27.
      28.
      29.
      30.
      31.
      32.
      33.
      34.
      35.
      36.

Two ： Development steps of functions related to audio playback ability

This project realizes the equipment A,B At the same time, it has the ability to play audio , Audio playback is as a separate serviceAbility, Use HarmonyOS IDL Realize the communication and data transmission between different devices , The code example is as follows ：

    /*
     * Example of a service method that uses some parameters
     */
    // Indicates that the method is a one-way method , That is, after calling the method, you can return without waiting for the method to execute 
    [oneway]
    void sendCommand([in] int command, [in] int soundId,[in] int selectResults);

}

     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.

AudioServiceAbility When the project starts , Load piano key audio resources , And keep the system running in the background , Prevent the system kill, And according to the range selected by the user , And touch different keys to SoundPlayer Play the audio , The code example is as follows ：


    private static final int NOTIFICATION_ID = 1005;
    private static final String TAG = AudioServiceAbility.class.getSimpleName();
    private static final HiLogLabel LABEL_LOG = new HiLogLabel(3, 0xD001100, TAG);

    private OnePianoAudio onePianoAudio;
    .....
    public static final int PLAY_AUDIO_MSG = 100;

    @Override
    public void onStart(Intent intent) {
        HiLog.error(LABEL_LOG, "PlayerServiceAbility::onStart");
        super.onStart(intent);
        onePianoAudio = new OnePianoAudio(getContext());
        .....
        NotificationRequest request = new NotificationRequest(NOTIFICATION_ID).setTapDismissed(true);
        NotificationRequest.NotificationNormalContent content = new NotificationRequest.NotificationNormalContent();
        content.setTitle(" Audio services ").setText(" The service is running ...");
        NotificationRequest.NotificationContent notificationContent = new NotificationRequest.NotificationContent(content);
        request.setContent(notificationContent);
        keepBackgroundRunning(NOTIFICATION_ID, request);
    }
    @Override
    public void onStop() {
        super.onStop();
        HiLog.info(LABEL_LOG, "PlayerServiceAbility::onStop");
        // Cancel background operation 
        cancelBackgroundRunning();
    }
    @Override
    public IRemoteObject onConnect(Intent intent) {
        super.onConnect(intent);
        return new AudioRemountObject("AudioRemountObject").asObject();
    }
    @Override
    public void onDisconnect(Intent intent) {
        super.onDisconnect(intent);
    }

    // Audio remote object 
    private class AudioRemountObject extends AudioPlaybackCapabilityInterfaceStub {
        public AudioRemountObject(String descriptor) {
            super(descriptor);
        }

        @Override
        public void sendCommand(int command, int soundId, int selectResults) {
            LogUtil.debug("AudioServiceAbility", "sendCommand");
            if (command == PLAY_AUDIO_MSG) {
                switch (selectResults) {
                    case ConstantUtils.RANGE_ONE:
                        onePianoAudio.soundOnePlay(soundId);
                        break;
             	......
                }
            }
        }
    }
}


     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.
      18.
      19.
      20.
      21.
      22.
      23.
      24.
      25.
      26.
      27.
      28.
      29.
      30.
      31.
      32.
      33.
      34.
      35.
      36.
      37.
      38.
      39.
      40.
      41.
      42.
      43.
      44.
      45.
      46.
      47.
      48.
      49.
      50.
      51.
      52.
      53.
      54.
      55.
      56.
      57.
      58.
      59.
      60.

1. stay MainAbilitySlice in OnStart（） Start the local audio service , Avoid audio proxy interfaces Proxy It's empty , The code example is as follows ：

public void onStart(Intent intent) {
	.....
          startLocalAudioPlay()// Start the local audio service 
	.....
}
// Audio interface proxy 
AudioPlaybackCapabilityInterfaceProxy PlayerAudioInterfaceProxy = null;
// Ability to connect 
private final IAbilityConnection AudioAbilityConnection = new IAbilityConnection() {
    @Override
    public void onAbilityConnectDone(ElementName elementName, IRemoteObject iRemoteObject, int i) {
        PlayerAudioInterfaceProxy = new AudioPlaybackCapabilityInterfaceProxy(iRemoteObject);
    }

    @Override
    public void onAbilityDisconnectDone(ElementName elementName, int i) {
        PlayerAudioInterfaceProxy = null;
    }
};
private void startLocalAudioPlay() {
    Intent localIntent = new Intent();
    Operation localOperation = new Intent.OperationBuilder()
            .withBundleName(getBundleName())
            .withAbilityName(ConstantUtils.AUDIO_ABILITY_MAIN)
            .withFlags(Intent.FLAG_START_FOREGROUND_ABILITY)
            .build();
    localIntent.setOperation(localOperation);
    startAbility(localIntent);
    // Local audio playback capability connection 
    connectAbility(localIntent, AudioAbilityConnection);
}


     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.
      18.
      19.
      20.
      21.
      22.
      23.
      24.
      25.
      26.
      27.
      28.
      29.
      30.
      31.
      32.

3、 ... and ： Function development steps related to range selection ability

1. Click the range selection button , You can pop up the pop-up box for range selection , The same as the flow button , Range selection pop-up box , The user is choosing the corresponding range , The current device can be switched to the selected range , And the corresponding audio can be played , stay MainAbilitySlice Of OnStart（） Method. The example code is as follows ：

2. According to the result selected by the user , Replace the range on the device , The code example is as follows ：


private void setRangeLayout(int selectRangeResult) {
    switch (selectRangeResult) {
        case ConstantUtils.RANGE_ONE:
            showFraction = oneFraction;
            rangeSelection();
            rangeDisplay.setText(" Big two 、 A group of ");
            break;
       .....
        default:
            break;
    }
}

private void rangeSelection() {
    FractionManager fractionManager = ((FractionAbility) getAbility()).getFractionManager();
    FractionScheduler fractionScheduler = fractionManager.startFractionScheduler();
    Optional<Fraction> fractionByTag = fractionManager.getFractionByTag(showFraction.fractionName());

    if (mCurrentFraction != null) {
        fractionScheduler.hide(mCurrentFraction);
    }
    if (fractionByTag != null && fractionByTag.isPresent()) {
        fractionScheduler.show(fractionByTag.get());
    } else {
        fractionScheduler.add(ResourceTable.Id_range_key, showFraction, showFraction.fractionName());
        fractionScheduler.show(showFraction);
    }

    fractionScheduler.submit();
    mCurrentFraction = showFraction;
    //fractionScheduler.replace(ResourceTable.Id_range_key,showFraction);
    //fractionScheduler.submit();
}

     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.
      18.
      19.
      20.
      21.
      22.
      23.
      24.
      25.
      26.
      27.
      28.
      29.
      30.
      31.
      32.
      33.
      34.

Reference resources

1.HarmonyOS Circulation characteristics （ Cross end migration ） May refer to ： https://developer.harmonyos.com/cn/docs/documentation/doc-guides/hop-cross-device-migration-guidelines-0000001146058939
2.HarmonyOS IDL The interface specification can be referred to ：
https://developer.harmonyos.com/cn/docs/documentation/doc-references/idl-overview-0000001050762835
3. Project address , For reference ： https://gitee.com/swan-link/simple-piano

Summary and analysis

1. Before circulation , Circulation constraints must be met , All devices need to be in the same WiFi, And log in with the same Huawei account ;
2. After circulation , equipment B The range selection function on is the same as that of the device A Range selection function , equipment A And equipment B Audio playback does not conflict with each other ;
3. at present Nova 9 When the mobile phone runs this project , There are problems at the bottom , It can't be solved for the time being , No problem with other mobile phones ;
4.HarmonyOS SoundPlayer Disadvantages of native short tone playing ,SoundPlayer Play a short tone when playing , All audio resources need to be loaded in advance , namely createSound(Context context, int resourceId) The method is to combine audio resources according to the application context ID Load audio data to generate short tone resources , The method is asynchronous , There are many piano keys in this project , Yes 88 Key resources , It takes a long time to complete the generation of all short tone resources , The project is here , The solution is as follows ：
All key audio resources in the project , It is divided into seven ranges , At the same time, all resources are divided into seven SoundPlayer Generate short tone resources , It can effectively reduce the time consumption .
5. This project triggers piano key tone , Is to set the touch event on the whole layout page , Flexible access to device screen size , Divide different key areas , Enable users to operate , It can realize the touch effect of the corresponding key , And the corresponding piano key audio playback , The sample code is as follows ：

    int pointerIndex = touchEvent.getIndex();
    int pointerId = touchEvent.getPointerId(pointerIndex);
    float x = touchEvent.getPointerPosition(pointerIndex).getX();
    float y = touchEvent.getPointerPosition(pointerIndex).getY();
    switch (touchEvent.getAction()) {
        case TouchEvent.PRIMARY_POINT_DOWN:
        case TouchEvent.OTHER_POINT_DOWN:
            onFingerPress(pointerId, x, y);
            break;
        case TouchEvent.OTHER_POINT_UP:
        case TouchEvent.PRIMARY_POINT_UP:
            onFingerLift(pointerId, x, y);
            break;
        case TouchEvent.POINT_MOVE:
            // Get the number of touch or track tracking pointers in an event 
            int pointCount = touchEvent.getPointerCount();
            for (int i = 0; i < pointCount; i++) {
                //getPointerPosition(i) Get the coordinates of a pointer of touch or track tracking relative to the offset position in an event 
                onFingerSlide(touchEvent.getPointerId(i), touchEvent.getPointerPosition(i).getX(), touchEvent.getPointerPosition(i).getY());
            }
            break;
        case TouchEvent.CANCEL:
            onAllFingersLift();
            break;
    }
    return true;
};


     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.
      18.
      19.
      20.
      21.
      22.
      23.
      24.
      25.
      26.
      27.
      28.

The above is used HarmonyOS Cross end migration ,Fractio And other technologies to realize the interactive process of mobile piano , Through the project , We can quickly understand the data “ Multi terminal cooperation ” and “ Cross end migration ”, It is convenient to quickly realize seamless switching in other projects .