美文网首页
2018-04-02

2018-04-02

作者: deeg | 来源:发表于2018-04-02 15:09 被阅读0次

Uwp——NaiveMediaPlayer

一、整体效果(请原谅我的渣画质)

image.png
       这是播放mp4文件的时候,mp3文件的话中间就是白板了,太懒了背景就懒得找图片放了。最左边的+按钮是打开mp3,mp4文件,play是控制暂停的,右边喇叭是调节音量的,虽然设计很反人类……(待会儿你就知道了)
       我用的MediaElement,不如新版的MediaPlayerElement好用,我还在其它地方的代码看到过MediaPlayer声明变量的,最后又给指定成了MediaPlayerElement,反正就是乱七八糟的,我还是用最菜的那个吧。说MediaElement菜是因为相比最新的MediaPlayerElement,播放暂停,还有音量Slider控制都集成在里面了,弱鸡MediaElement还得自己定义,真的是麻烦(关键我还搞不定)
       上述实现了要求的基本功能,播放mp3,mp4文件,虽然奇丑无比。
作业链接:https://github.com/XuweiC/NaiveUwp

二、思路浅谈

       看到这个作业,毫无疑问的不知从何入手,我知道肯定有相关的类控件干这个事,但是我连它叫什么名字都不知道……所以就去这么搜Uwp--音乐播放器,然后见识了各种神仙的作品。反正我参考过的链接太多了,还有很多重样的,我是放不过来了,待会儿就几个技术问题放一下参考链接吧,应该没有人……就看三两个链接然后完工的吧,如果真有的话我敬他/她是条汉子。

①为了解决第一个打开文件的问题,我找到了以下传送门。

       第一个链接:https://www.cnblogs.com/webabcd/archive/2013/01/24/2874156.html
       文中如是说:重新想象 Windows 8 Store Apps (6) - 控件之媒体控件: Image, MediaElement……balabala
       其实我是不纠结win8 win10什么的了,一开始反正什么都不懂,看就行了
       代码如下:

// 播放本地视频或音频
        private async void btnPickFile_Click_1(object sender, RoutedEventArgs e)
        {
            FileOpenPicker picker = new FileOpenPicker();
            picker.SuggestedStartLocation = PickerLocationId.VideosLibrary;
            picker.FileTypeFilter.Add(".wmv");
            picker.FileTypeFilter.Add(".mp4");
            picker.FileTypeFilter.Add(".mp3");
            picker.FileTypeFilter.Add(".wma");
            picker.FileTypeFilter.Add(".png");
            var file = await picker.PickSingleFileAsync();
            if (file != null)
            {
                var stream = await file.OpenAsync(FileAccessMode.Read);
                // 指定需要让 MediaElement 播放的媒体流
                mediaElement.SetSource(stream, file.ContentType);
            }
        }
// 通过指定一个 url 播放一个网络视频
        private void btnPlayUrl_Click_1(object sender, RoutedEventArgs e)
        {
            mediaElement.Source = new Uri("http://media.w3.org/2010/05/sintel/trailer.mp4", UriKind.Absolute);
        }

       基于以上代码,我写出了:

 private async void OpenFileButton_Click(object sender, RoutedEventArgs e)
        {
            FileOpenPicker picker = new FileOpenPicker();
            picker.SuggestedStartLocation = PickerLocationId.VideosLibrary;
            picker.FileTypeFilter.Add(".mp4");
            picker.FileTypeFilter.Add(".mp3");
            var file = await picker.PickSingleFileAsync();
            if (file != null)
            {
                var stream = await file.OpenAsync(FileAccessMode.Read);
                // 指定需要让 MediaElement 播放的媒体流
                mediaElement.SetSource(stream, file.ContentType);
            }
            mediaElement.Play();
        }

       对我什么都没干,就把文件后缀名改掉了,同时忽视了url播放网络视频,因为添加源就可以了,我们要Naive一点的,就播放本地视频吧。

②为了解决第二个播放控制问题,我参考了以下链接。

       我是真的服气!MediaElement真是废物!好了吐槽完了,我们来说说播放控制吧,因为上述过程结束之后需要一个简易的播放暂停按钮啊,再Naive也得要这个吧!所以我就在这条路上越走越远,什么音量了,滑块了,神烦。
第二道传送门:https://blog.csdn.net/linwh8/article/details/70314698
以及                 https://www.cnblogs.com/tianma3798/p/5928217.html
       第一个链接中代码如下

private void pause_Click(object sender, RoutedEventArgs e)
        {
            try
            {
                if (_mediaTimelineController.State == MediaTimelineControllerState.Running)
                {
                    EllStoryboard.Pause();
                    _mediaTimelineController.Pause();
                }
                else
                {
                    //EllStoryboard.Resume();
                    EllStoryboard.Begin();
                    _mediaTimelineController.Resume();
                }
            }
            catch
            {

            }
        }

        private void start_Click(object sender, RoutedEventArgs e)
        {
            try
            {
                DispatcherTimer timer = new DispatcherTimer();
                timer.Interval = TimeSpan.FromSeconds(1);
                timer.Tick += timer_Tick;
                timer.Start();
                EllStoryboard.Begin();
                _mediaTimelineController.Start();
            }
            catch {

            }

        }

       部分变量的解释我放在这里:

public sealed partial class MainPage : Page
    {
        MediaPlayer _mediaPlayer = new MediaPlayer();
        MediaTimelineController _mediaTimelineController = new MediaTimelineController();
        TimeSpan _duration;
        // MediaPlaybackSession _mediaPlaybackSession = new MediaPlaybackSession();
        public MainPage()
        {
            this.InitializeComponent();
            var mediaSource = MediaSource.CreateFromUri(new Uri("ms-appx:///Assets/Video1.MP4"));
            mediaSource.OpenOperationCompleted += MediaSource_OpenOperationCompleted;
            _mediaPlayer.Source = mediaSource;
            _mediaPlayer.CommandManager.IsEnabled = false;
            _mediaPlayer.TimelineController = _mediaTimelineController;
            //_mediaPlayer.Play();
            _mediaPlayerElement.SetMediaPlayer(_mediaPlayer);
        }

       所以我理所当然的没学会,他用的就是上述我提到的mediaplayer,然后
_mediaPlayerElement.SetMediaPlayer(_mediaPlayer);……不提了不提了,都是泪。
然后我又找到了第二个链接,代码如下:

private void button_Click(object sender, RoutedEventArgs e)
{
    if (button.Content.ToString() == "播放")
    {
        button.Content = "暂停";
        mediaElement.Play();
    }
    else
    {
        button.Content = "播放";
        mediaElement.Pause();
    }
}

       于是就有了我作业里的:

 private void PlayButton_Click(object sender, RoutedEventArgs e)
        {
            if (PlayButton.Content.ToString() == "Play")
            {
                PlayButton.Content = "Pause";
                mediaElement.Play();
            }
            else
            {
                PlayButton.Content = "Play";
                mediaElement.Pause();
            }
        }

       尽管这样还会有一个小bug,我测试的时候先点的+打开一个文件,然后按钮还是Play,点一下,没反应,再点一下,才能暂停,好了这个问题我们先不谈了。(MediaPlayerElement你是真的赖皮)

③音量控制问题

       显然,MediaElement并没给配音量调节,所以为了解决这个问题,我第一个想到的是,我得做一个Slider,通过数据绑定让音量随滑块值的变化而变化,而且点击喇叭之后出现滑块,也就是可以用一个flyout。
       理想当然丰满,结果是我做了一个反人类的音量调节器……flyout也由于没有搞定滑块数据绑定而无心再弄,以及被MediaPlayerElement气得半死。
       我的音量调节功能是我自己瞎捣鼓的,代码如下:

public void Volumn_ValueChanged(object sender, RoutedEventArgs e)
       {
           
       }
       private void VoiceButton_Click(object sender, RoutedEventArgs e)
       {
           mediaElement.Volume = Volumn.Value;
           //mediaElement.Volume = {Binding value, ElementName=Volumn};
       }

       你一眼就能看到我把音量调节放在了Click里,也就是说拖动滑块,然后点击那个喇叭,然后就完成了音量调节功能了,本来这里应该放置静音功能的。结果调节没搞成,然后就成这样了。
       以下是我在搜集资料时候参考的部分链接: uwp开发:Slider控件和MediaElement绑定,实现拖动播放。
哼,你说为什么没有Slider&音量控制这个选项?因为MediaPlayerElement已经完成这件事了!倒是进度条拖动控制视频播放进度的东西有一堆,用的是一个叫做转换器的东西。
       参考代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.UI.Xaml.Data;

namespace Homework8.Converter
{
    class timeLineConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            return ((TimeSpan)value).TotalSeconds;
        }

        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            return TimeSpan.FromSeconds((double)value);
      }
    }
}

       总结:在实现Naive播放器的时候,我遇到的就是以上几个问题,MediaPlayerElement选手们,嫉妒使我面目狰狞。这告诉我们以后要实现什么功能的时候要去找找那些主流的控件/工具,这能省大力气!其实一个用户交互体验好,干净、功能齐全的音乐播放器还是挺复杂的,这次我对那些控件的使用有了更多的理解,参考官方文档也能学到很多东西,比如:
       https://docs.microsoft.com/zh-cn/windows/uwp/design/controls-and-patterns/media-playback

相关文章

  • 2018-04-02

    2018-04-02 王晓艳_6d4c 2018-04-02 00:20 · 字数 98 · 阅读 0 · 日记本...

  • knn约会实例2

    2018-04-02 分析数据:使用Matplotib创建散点图 https://www.cnblogs.com/...

  • 2018-04-02

    2018-04-02 180 戴师傅 简书作者 2018.04.02 21:07 打开App 2018-04-02...

  • 2018-04-02

    2018-04-02 180 戴师傅 简书作者 2018.04.02 22:09 打开App 2018-04-03...

  • 2018-04-02

    嘿,穷小子,2018炒股你得...... 2018-04-02 ​​​​ 因为我没有钱了, 所以出来挣钱了。 ...

  • 2018-04-03

    2018-04-02 想念99 2018-04-03 22:42 · 字数 712 · 阅读 0 · 日记本 上周...

  • 不要浪费自己的人生

    你好,四月!时间可以浪费,人生不能! 晓多 关注 2018-04-02 23:03 · 字数 3754 · 阅读 ...

  • 四月,新的国旗班!

    2018-04-02桂林理工大学国旗班 Apr.1 NO.2 Guilin Polytechnic Univers...

  • 2018-04-02

    2018-04-02 180 戴师傅 简书作者 2018.04.02 20:43 打开App (稻盛哲学学习会)打...

  • 傍晚游开封西湖

    艳阳天边挂,微风拂面颊。 俗气水中取,自在走天涯。 写于2018-04-02 10:15:36

网友评论

      本文标题:2018-04-02

      本文链接:https://www.haomeiwen.com/subject/ggzthftx.html