Avalonia跨平台入门第十九篇之语音播放

在前面分享的几篇中咱已经玩耍了Popup、ListBox多选、Grid动态分、RadioButton模板、控件的拖放效果、控件的置顶和置底、控件的锁定、自定义Window样式、动画效果、Expander控件、ListBox折叠列表、聊天窗口、ListBox图片消息、窗口抖动、语音发送;今天趁着大周末的时间接着去摸索语音的播放效果,最终实现的效果:

播放语音使用了OpenAL:

public static void PlayVoice(string filename)
{
    using(AudioContext context = new AudioContext())
    {
        int buffer = AL.GenBuffer();
        int source = AL.GenSource();
        int state;
        int channels, bits_per_sample, sample_rate;
        byte[] sound_data = LoadWave(File.Open(filename, FileMode.Open), out channels, out bits_per_sample, out sample_rate);
        AL.BufferData(buffer, GetSoundFormat(channels, bits_per_sample), sound_data, sound_data.Length, sample_rate);
        AL.Source(source, ALSourcei.Buffer, buffer);
        AL.SourcePlay(source);
        Trace.Write("Playing");
        // Query the source to find out when it stops playing.
        do {
            Thread.Sleep(250);
            Trace.Write(".");
            AL.GetSource(source, ALGetSourcei.SourceState, out state);
        }
        while ((ALSourceState) state == ALSourceState.Playing);
        Trace.WriteLine("");
        AL.SourceStop(source);
        AL.DeleteSource(source);
        AL.DeleteBuffer(buffer);
    }
}

1、至于播放语音的动画,一开始想到用OpacityMask试试,结果失败了;

2、想着数据触发器绑定样式,结果貌似不支持

3、后面想到上面覆盖Rectangle控制他的Margin实现;

3、然后找到Avalonia.Xaml.Behaviors 这个类库,结果也没成功；

4、后来发现Github上的一种解决方案

https://github.com/AvaloniaUI/Avalonia/issues/2427 
用#5710实现
<Button Classes.myClass= "{Binding xxx}" />

然后就有了最初的一版写法:

<Rectangle Name="RecOverLayer" Margin="70,0,0,0" Width="35" Height="35" Fill="#E5E5E5"
                   Classes.MyAnimation="{Binding $parent[Controls:ChatBubble].IsStartPlay,Mode=TwoWay}">
    <Rectangle.Styles>
        <Style Selector="Rectangle.MyAnimation">
            <Style.Animations>
                <Animation Duration="0:0:1"
                           IterationCount="{Binding Duration,Converter={StaticResource PlayDurationToIterationCountConverter}}" 
                           FillMode="Both" PlaybackDirection="Reverse">
                    <KeyFrame Cue="100%">
                        <Setter Property="Margin" Value="0"/>
                    </KeyFrame>
                </Animation>
            </Style.Animations>
            </Style>
    </Rectangle.Styles>
</Rectangle>

后面为了通用性,使用了绑定:

<Rectangle Name="RecOverLayer" Margin="{Binding Role,Converter={StaticResource ChatRoleTypeToRectangleMarginConverter}}" Width="35" Height="35" Fill="{Binding Role,Converter={StaticResource ChatRoleTypeToRectangleFillConverter}}" Classes.MyAnimation="{Binding $parent[Controls:ChatBubble].IsStartPlay}">
    <Rectangle.Styles>
        <Style Selector="Rectangle.MyAnimation">
            <Style.Animations>
                <Animation Duration="0:0:1" IterationCount="{Binding Duration,Converter={StaticResource PlayDurationToIterationCountConverter}}" FillMode="Both" PlaybackDirection="Reverse">
                    <KeyFrame Cue="100%">
                        <Setter Property="Margin" Value="0" />
                    </KeyFrame>
                </Animation>
            </Style.Animations>
            </Style>
    </Rectangle.Styles>
</Rectangle>

最终简单的效果先这样吧;还是有个bug,再次播放语音时,动画效果失效了;回头再摸索一下原因吧;编程不息、Bug不止、无Bug、无生活;改bug的冷静、编码的激情、完成后的喜悦、挖坑的激动 、填坑的兴奋;这也许就是屌丝程序员的乐趣吧;今天就到这里吧;希望自己有动力一步一步坚持下去;生命不息,代码不止;大家抽空可以看看今天分享的效果,有好的意见和想法,可以在留言板随意留言;我看到后会第一时间回复大家,多谢大家的一直默默的关注和支持!如果觉得不错,那就伸出您的小手点个赞并关注一下,多谢您的支持！