WPF 仿语音播放 自定义控件

最新推荐文章于 2023-06-16 06:30:00 发布
最新推荐文章于 2023-06-16 06:30:00 发布
阅读量138 收藏
点赞数
分类专栏： 技术
原文链接：https://www.colorgg.com
版权
这个博客介绍了一个自定义的VoiceAnimeButton控件，该控件使用Path绘制图形并通过动画展示声音播放过程。控件具备播放时间和状态显示功能，但作者指出由于其简单性，可能不适合用于实际项目。在XAML中定义了控件样式和内容模板，通过事件触发动画的开始和结束。此外，提供了C#代码展示了控件的逻辑，包括鼠标点击启动和停止播放的逻辑，以及播放事件的处理。
摘要由CSDN通过智能技术生成

原理很简单，利用Path画一个图，然后用动画进行播放，播放时间由依赖属性输入赋值与控件内部维护的一个计时器进行控制。

控件基本是玩具，无法作为真实项目使用。

因为没有设置播放源，所以编写异步播放源或者实际播放时候要将事件引发，是否播放等属性，事件移到真实播放事件

非专业UI，即使知道怎么画图也是画的不如意，到底是眼睛会了，手不行啊。

 

主界面xaml

   <local:VoiceAnimeButton    Height="40" Width="200" IconMargin="5,0,-8,0"  HorizontalContentAlignment="Center"  CornerRadius="15" VerticalContentAlignment="Center" BorderBrush="Black"  IconFill="Black"    BorderThickness="1" Background="Transparent"   VoicePlayTime="0:0:1" >
            <local:VoiceAnimeButton.ContentTemplate>
                <DataTemplate>
                    <TextBlock FontSize="10" >
                     <Run Text="播放时间"/>
                     <Run Text="{Binding  RelativeSource={RelativeSource AncestorLevel=1,AncestorType=local:VoiceAnimeButton,Mode=FindAncestor}, Path=VoicePlayTime}"/>
                     <Run Text="  "/>
                     <Run Text="状态： "/>
                     <Run Text="{Binding  RelativeSource={RelativeSource AncestorLevel=1,AncestorType=local:VoiceAnimeButton,Mode=FindAncestor}, Path=IsVoicePlay}"/>
                    </TextBlock>
                </DataTemplate>
            </local:VoiceAnimeButton.ContentTemplate>
        </local:VoiceAnimeButton>

 

控件设计XAML

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:声音播放动画">


    <Style TargetType="{x:Type local:VoiceAnimeButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:VoiceAnimeButton}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"  CornerRadius="{TemplateBinding CornerRadius}" Padding="1">
                        <Grid  >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Border Margin="{TemplateBinding IconMargin}" >
                                <Viewbox>
                                    <Path x:Name="VoicePath"  Height="{TemplateBinding IconHieght}" Width="{TemplateBinding IconWidth}"   Fill="{TemplateBinding IconFill}" >
                                        <Path.Data>
                                            <PathGeometry>
                                                <PathFigureCollection>
                                                    M20 20 Q12 45 20 85 l7 -4 Q18 48 27 23 l-7 -3Z
                                    M32 29 Q22 45 32 75 l7 -4 Q29 50 38 33 l-6.5 -4
                                    M45 35 Q38 48 45 68 l7 -4 Q45 50 52 39 l-7.5 -4
                                    M58 41 Q55 49 58 61 l17 -11Z
                                                </PathFigureCollection>
                                            </PathGeometry>
                                        </Path.Data>
                                    </Path>
                                </Viewbox>
                            </Border>
                            <ContentPresenter Grid.Column="1"   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <EventTrigger  RoutedEvent="VoicePlayStart">
                            <BeginStoryboard x:Name="bs1">
                                <Storyboard Storyboard.TargetProperty="Data" Storyboard.TargetName="VoicePath" RepeatBehavior="Forever" Duration="0:0:0.4" BeginTime="0">
                                    <ObjectAnimationUsingKeyFrames>
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0.1">
                                            <DiscreteObjectKeyFrame.Value>
                                                <PathGeometry>
                                                    <PathFigureCollection>
                                                        M45 35 Q38 48 45 68 l7 -4 Q45 50 52 39 l-7.5 -4
                                                        M58 41 Q55 49 58 61 l17 -11Z
                                                    </PathFigureCollection>
                                                </PathGeometry>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0.2">
                                            <DiscreteObjectKeyFrame.Value>
                                                <PathGeometry>
                                                    <PathFigureCollection>
                                                        M32 29 Q22 45 32 75 l7 -4 Q29 50 38 33 l-6.5 -4
                                                        M45 35 Q38 48 45 68 l7 -4 Q45 50 52 39 l-7.5 -4
                                                        M58 41 Q55 49 58 61 l17 -11Z
                                                    </PathFigureCollection>
                                                </PathGeometry>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0.3">
                                            <DiscreteObjectKeyFrame.Value>
                                                <PathGeometry>
                                                    <PathFigureCollection>
                                                        M20 20 Q12 45 20 85 l7 -4 Q18 48 27 23 l-7 -3Z
                                                        M32 29 Q22 45 32 75 l7 -4 Q29 50 38 33 l-6.5 -4
                                                        M45 35 Q38 48 45 68 l7 -4 Q45 50 52 39 l-7.5 -4
                                                        M58 41 Q55 49 58 61 l17 -11Z
                                                    </PathFigureCollection>
                                                </PathGeometry>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="VoicePlayEnd">
                            <RemoveStoryboard BeginStoryboardName="bs1"/>
                        </EventTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

 

控件CS代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Threading;

namespace 声音播放动画
{
   
    public class VoiceAnimeButton : ContentControl
    {
        static VoiceAnimeButton()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(VoiceAnimeButton), new FrameworkPropertyMetadata(typeof(VoiceAnimeButton)));
        }

        private DispatcherTimer Timer;

        public VoiceAnimeButton()
        {
            Timer = new DispatcherTimer();
            Timer.Tick += Timer_Tick;
            Timer.Interval = TimeSpan.FromSeconds(1);
        }

        private void Timer_Tick(object sender, EventArgs e)
        {
            Timer.Stop();
            IsVoicePlay = false;
            this.RaiseEvent(new RoutedEventArgs(VoicePlayEndEvent, this));

        }

        public static readonly RoutedEvent VoicePlayStartEvent = EventManager.RegisterRoutedEvent("VoicePlayStart", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(VoiceAnimeButton));

        /// <summary>
        /// 声音播放开始事件
        /// </summary>
        public event RoutedEventHandler VoicePlayStart
        {
            add
            {
                this.AddHandler(VoicePlayStartEvent, value);
            }
            remove
            {
                RemoveHandler(VoicePlayStartEvent, value);
            }
        }


        public static readonly RoutedEvent VoicePlayEndEvent= EventManager.RegisterRoutedEvent("VoicePlayEnd", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(VoiceAnimeButton));

        /// <summary>
        /// 声音播放结束事件
        /// </summary>
        public event RoutedEventHandler VoicePlayEnd
        {
            add
            {
               AddHandler(VoicePlayEndEvent, value);
            }
            remove
            {
                RemoveHandler(VoicePlayEndEvent, value);
            }
        }

        protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)
        {
            base.OnMouseLeftButtonDown(e);
            IsMouseLeftClick = true;
            Timer.Interval = VoicePlayTime;
            Timer.Start();
            IsVoicePlay = true;
            this.RaiseEvent(new RoutedEventArgs(VoicePlayStartEvent,this));
           
        }
        protected override void OnMouseLeftButtonUp(MouseButtonEventArgs e)
        {
            base.OnMouseLeftButtonUp(e);
            IsMouseLeftClick = false;
        }

        public static readonly DependencyProperty VoicePlayTimeProperty = DependencyProperty.Register("VoicePlayTime", typeof(TimeSpan), typeof(VoiceAnimeButton), new PropertyMetadata(TimeSpan.FromMilliseconds(1000)));
      
        public TimeSpan VoicePlayTime
        {
            get => (TimeSpan)GetValue(VoicePlayTimeProperty);
            set => SetValue(VoicePlayTimeProperty, value);
        }
        public static readonly DependencyProperty IsMouseLeftClickProperty = DependencyProperty.Register("IsMouseLeftClick", typeof(bool), typeof(VoiceAnimeButton),new PropertyMetadata(false));

        public bool IsMouseLeftClick
        {
            get => (bool)GetValue(IsMouseLeftClickProperty);
            set => SetValue(IsMouseLeftClickProperty, value);
        }
        public static readonly DependencyProperty IconWidthProperty = DependencyProperty.Register("IconWidth", typeof(double), typeof(VoiceAnimeButton), new PropertyMetadata(100.0));

        public double IconWidth
        {
            get => Convert.ToDouble(IconWidthProperty);
            set => SetValue(IconWidthProperty, value);
        }
        public static readonly DependencyProperty IconHieghtProperty = DependencyProperty.Register("IconHieght", typeof(double), typeof(VoiceAnimeButton), new PropertyMetadata(100.0));

        public double IconHieght
        {
            get => Convert.ToDouble(IconHieghtProperty);
            set => SetValue(IconHieghtProperty, value);
        }

        public static readonly DependencyProperty IconFillProperty= DependencyProperty.Register("IconFill", typeof(SolidColorBrush), typeof(VoiceAnimeButton), new PropertyMetadata(new SolidColorBrush(Colors.Black)));

        public SolidColorBrush IconFill
        {
            get => GetValue(IconFillProperty) as SolidColorBrush;
            set => SetValue(IconFillProperty, value);
        }

        public static readonly DependencyProperty CornerRadiusProperty = DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(VoiceAnimeButton), new PropertyMetadata(new CornerRadius(0)));

        public CornerRadius CornerRadius
        {
            get => (CornerRadius)GetValue(CornerRadiusProperty);
            set => SetValue(CornerRadiusProperty, value);
        }
        public static readonly DependencyProperty IconMarginProperty = DependencyProperty.Register("IconMargin", typeof(Thickness), typeof(VoiceAnimeButton), new PropertyMetadata(new Thickness(0.0)));

        public Thickness IconMargin
        {
            get => (Thickness)GetValue(IconMarginProperty);
            set => SetValue(IconMarginProperty, value);
        }

        public static readonly DependencyProperty IsVoicePlayProperty = DependencyProperty.Register("IsVoicePlay", typeof(bool), typeof(VoiceAnimeButton));

        public bool IsVoicePlay
        {
            get => (bool)GetValue(IsVoicePlayProperty);
            set => SetValue(IsVoicePlayProperty, value);
        }
    }
}

 

WPF仿微信播放语音动画
yyanjinhua的博客
04-11 685
WPF使用Animation仿WeChat（微信）播放语音消息效果图预览新建MyCustomControl类。修改MainWindow.xaml。新增资源（3张）。MainWindow.xaml.cs新增Grid_MouseLeftButtonDown。 效果图预览 新建MyCustomControl类。 public class MyCustomControl : Control { ...
在WPF中自定义控件
热门推荐
ffghggf的博客
11-07 1万+
在WPF中自定义控件
wpf 动态语音播放文本框输入的文字
05-25
使用到了 system.speech的引用 这是最简单的也可以自己添加逻辑完善 可以详细的看下SpeechSynthesizer这个类的方法以及事件
WPF三种播放音频语音包方法
wangjunlei的专栏
01-05 482
当然，想异步循环播放，可以使用PlayLooping方法，直到你调用Stop或重新播放一个新的声音为止。如果声音文件的加载需要很长的时间，例如从网络来，使用同步播放，会导致UI死掉。如果你想播放系统声音，但记不住他们的文件名，可以用SystemSounds类中的一些静态属性：Asterisk，Beep，Exclamation，Hand，Question。在工具箱上点右键，选择“选择项目(Choose Items)”，切到COM页，找到 Windows Media Player，勾选并点击确定。
wpf 录音和播放音频
03-11
录音后停止,播放音频,做了一些代码的控制 .net4.5环境 vs2017打开 分析本地音频文件 可以直接使用
C#WPF 语音实例源代码 亲测可用 tts（text to sound）开发教程 一步一步 教你制作语音软件 附图和源代码 . 详细教程
02-07
C#WPF 语音实例源代码 亲测可用 tts（text to sound）开发教程 一步一步 教你制作语音软件 附图和源代码 . 详细教程程:http://blog.csdn.net/wyx100/article/details/43603419
WPF之自定义控件
05-03
接下来，我们通过一个具体的例子——创建一个带语音报时功能的钟表控件——来演示如何在WPF中创建自定义控件： 1. **初始化项目**：在Visual Studio中新建一个WPF项目，并添加一个新的`UserControl`。这将自动生成...
C#/wpf播放语音和字幕(简单易懂，不需要引用dll)
最新发布
12-24
在C#和WPF开发中，创建一个能够播放语音并同步显示字幕的应用是一项常见的需求，尤其...通过这两个工程，开发者可以学习到如何在WPF应用中实现基础的音频播放功能，以及如何通过自定义逻辑来实现复杂的多媒体同步效果。
WPF开发txt阅读器10：语音播报快进快退
微小冷的学习笔记
06-16 760
在`MySpeech`类中，`SpeakAsync`为异步朗读，用这个函数的好处是，无需担心阻塞主窗口，从而在主程序中也就无需新建线程来`Speak`
wpf 实现的一个仿酷狗的音乐播放器
07-07
用wpf实现的一个仿酷狗程序（非源码），歌曲播放，歌词搜索，歌词显示 ，更换皮肤，textbox的水印文字。若无法使用 需要安装.netFramework4.5
wpf 实现的一个仿酷狗的音乐播放器(源码)
08-01
用wpf实现的一个仿酷狗程序，歌曲播放，歌词搜索，歌词显示 ，更换皮肤，textbox的水印文字。 之前上传了该程序的执行文件。http://download.csdn.net/detail/zltestliang/8877455#comment
【WPF动画】实现水波纹动画进度条
qq_36651243的博客
03-14 1251
【代码】【WPF动画】实现水波纹动画进度条。
WPF 说话-语音合成
qq_43393792的博客
04-21 2462
语音合成 在System.Speech程序集中，微软增加了一些非常酷的东西：语音合成，将文本转换为语音的能力，以及语音识别，将语音识别成文本的能力。 我们将专注于本文中的语音合成，然后在下一章进行语音识别。 要将文本转换为语音，我们将使用SpeechSynthesizer类。 这个类在System.Speech程序集中，我们需要添加它以在我们的应用程序中使用它。 根据您使用的Visual Studio版本，该过程如下所示： 添加适当的程序集后，我们现在可以使用System.Speech.Synthesis
wpf 语音通话_WPF实现文字语音播报
weixin_29168813的博客
12-30 1387
【实例简介】文本转语音，人声播报，如下图，点击Speak按钮 即可播报 好例子网【实例截图】【核心代码】public class SpeakHelper{// public static SpeechSynthesizer Synth = new SpeechSynthesizer();public static SpeechSynthesizer Synth;private static Th...
【WPF学习手记】WPF文本语音播报
Taosy
07-12 1982
WPF语音播报案例。 引用：System.Speech xaml代码 <Window x:Class="Text_Speech.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.c...
WPF 播放声音的三种方法
LisenYang的专栏
01-01 6594
方法一：古老的SoundPlayer类 　　它是.NET Framework 2.0的一部分，是对Win32 PlaySound API的封装。 　　它具有以下限制： 　　1）仅支持.wav音频文件； 　　2）不支持同时播放多个音频（任何新播放的操作将终止当前正在播放的）； 　　3）无法控制声音的音量； 　　下面的代码展示了如何使用SoundPlayer播放声音： Sou
C#WPF 语音开发教程 TTS中英文语音（男女声音）朗读 源代码下载 csdn tts（text to sound） 一步一步 教你制作语音软件 附图和源代码
wyx100的专栏
02-07 7849
C# WPF 语音开发教程 tts（text to sound） 一步一步 教你制作语音软件 附图和源代码 使用时，请确认电脑喇叭打开，并且不是静音额。
WPF实现录音和语音识别的两种方案
Mr.Simple的专栏
03-21 7929
开发环境： Windows 7 工具 : VS2012 前言 ：  最近在做微软的一点小项目需要用到语音识别，但是微软的语音识别真的太不给力了，其中遇到很多麻烦。偶然听到大熊说google的语音识别接口，于是搜索资料弄了一个，整理出来，希望能帮助需要的朋友，大神别喷就好。 一、使用Google Speech  API 思路解析：   1、首先通过WPF录音，这里注意码率必
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值