首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在按钮点击时播放来自URL的音频,并在swift中的滑块或进度条上显示进度。

在按钮点击时播放来自URL的音频,并在Swift中的滑块或进度条上显示进度,可以通过以下步骤实现:

  1. 导入AVFoundation框架:在Swift项目中,首先需要导入AVFoundation框架,以便使用音频播放和控制相关的类和方法。
  2. 创建AVPlayer实例:使用AVPlayer类来播放音频。可以通过提供音频的URL来创建AVPlayer实例。
  3. 创建播放按钮:在界面上创建一个按钮,用于触发音频播放操作。可以使用UIButton类来创建按钮,并为其添加点击事件。
  4. 播放音频:在按钮的点击事件中,创建AVPlayerItem实例,并将其设置为AVPlayer的当前项目。然后调用AVPlayer的play()方法开始播放音频。
  5. 创建滑块或进度条:在界面上创建一个滑块或进度条,用于显示音频播放的进度。可以使用UISlider或UIProgressView类来创建滑块或进度条。
  6. 更新进度:使用AVPlayer的addPeriodicTimeObserver方法来监听音频播放的进度。在回调中,可以获取当前播放时间和总播放时间,并将其转换为进度百分比。然后将进度百分比设置给滑块或进度条的value属性,以更新进度的显示。

以下是一个示例代码,演示了如何实现上述功能:

代码语言:txt
复制
import UIKit
import AVFoundation

class ViewController: UIViewController {
    var player: AVPlayer?
    var playerItem: AVPlayerItem?
    
    @IBOutlet weak var playButton: UIButton!
    @IBOutlet weak var progressSlider: UISlider!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // 初始化AVPlayer
        guard let audioURL = URL(string: "音频的URL") else { return }
        playerItem = AVPlayerItem(url: audioURL)
        player = AVPlayer(playerItem: playerItem)
        
        // 监听播放进度
        player?.addPeriodicTimeObserver(forInterval: CMTime(seconds: 1, preferredTimescale: CMTimeScale(NSEC_PER_SEC)), queue: DispatchQueue.main) { [weak self] time in
            guard let duration = self?.playerItem?.duration else { return }
            let currentTime = CMTimeGetSeconds(time)
            let totalDuration = CMTimeGetSeconds(duration)
            let progress = Float(currentTime / totalDuration)
            self?.progressSlider.value = progress
        }
    }
    
    @IBAction func playButtonTapped(_ sender: UIButton) {
        if player?.rate == 0 {
            // 播放音频
            player?.play()
            playButton.setTitle("暂停", for: .normal)
        } else {
            // 暂停音频
            player?.pause()
            playButton.setTitle("播放", for: .normal)
        }
    }
    
    @IBAction func progressSliderValueChanged(_ sender: UISlider) {
        guard let duration = playerItem?.duration else { return }
        let totalDuration = CMTimeGetSeconds(duration)
        let currentTime = Double(sender.value) * totalDuration
        let time = CMTime(seconds: currentTime, preferredTimescale: CMTimeScale(NSEC_PER_SEC))
        player?.seek(to: time)
    }
}

在上述示例代码中,需要将"音频的URL"替换为实际的音频文件的URL。同时,需要在界面上添加一个按钮和一个滑块,并将其与对应的IBOutlet和IBAction连接。

推荐的腾讯云相关产品:腾讯云音视频解决方案。该解决方案提供了丰富的音视频处理能力,包括音频播放、音频处理、音频转码等功能,适用于各种音视频应用场景。详情请参考腾讯云音视频解决方案的产品介绍:腾讯云音视频解决方案

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Qt5 QMediaPlayer 音乐播放

然后playlist里面的歌曲是看不到,就需要一个列表来显示歌曲,我用是QListWidget,这样的话,只需要把列表项与playlist里面的歌曲对应就可以了,然后要保存歌曲,数据库自然就少不了了...,并且把歌曲信息保存到数据库里了,可以初始化时候把数据库歌名添加到列表即list,把歌曲路径添加到播放列表即playlist,但是显示歌曲如果太多就会出现滚动条,默认滚动条貌似不是很好看,...,和歌曲时间 进度条进度条自然是用QHorizontalSlider了,主要就是歌曲进度得随着播放进度变化,所以可以使用信号和槽,QMediaPlayer有两个信号,QMediaPlayer::positionChanged...一首:当上一首按钮点击执行 void Widget::preMusic(){ int row = playlist->mediaCount();//获取歌曲数量 int current = playlist...} 下一首:点击下一首按钮执行 void Widget::nextMusic(){ int row = playlist->mediaCount();//获取歌曲数量 int current

1.4K30

HTML5 VideoAPI,打造自己Web视频播放

loop:loop:(循环播放)告诉浏览器音频到达末尾,再从头开始重新播放 preload:auto、mete、none:告诉浏览器如何下载音频 auto:让浏览器下载整个文件,以便用户单击播放按钮就能播放...) paused:设置返回音频/视频是否暂停 currentTime:设置返回音频/视频的当前播放位置(以秒计) ended:返回音频/视频播放是否已结束 更多属性、事件、方法请查看w3school.../css/player.css"> 为了显示播放按钮等图标我使用了字体图标 2.视频加载loading效果 一开始先隐藏视频,用一个背景图片替代,等到视频加载完成可以播放显示视频 CSS: .player...//显示视频总时长 totalTime.innerHTML = getFormatTime(this.duration); }; 4.播放、暂停 点击播放按钮显示暂停图标,播放和暂停状态之间切换图标...currPlayTime.innerHTML = getFormatTime(currTime); }; 这样就可以实时显示进度条了,此时,我们还需要点击进度条进行跳跃播放,即我们点击任意时间点视频跳转到当前时间点播放

4.8K40

HTML简单音乐播放器「建议收藏」

播放/暂停 按钮,触发该函数 // 作用:根据audiopaused属性 来检测当前音频是否已暂停 true:暂停 false:播放 function playPause(){...- seekBarPos.left; //获取当前鼠标进度条位置 seekLoc = audio.duration * (seekT / sArea.outerWidth()); //当前鼠标位置音频播放秒数...: 音频长度(单位:s)*(鼠标进度条位置/进度条宽度) sHover.width(seekT); //设置鼠标移动到进度条上变暗部分宽度 cM = seekLoc /...; // 设置音频播放时间 为当前鼠标点击位置时间 seekBar.width(seekT); // 设置进度条播放长度,为当前鼠标点击长度 hideHover();...// 调用该函数,隐藏原来鼠标移动到上方触发进度条阴影 } // 音频播放位置发生改变是触发该函数 function updateCurrTime() {

4K30

QT软件开发: 基于QT设计完整版视频播放器、多媒体播放器(mdk-sdk)

自动显示第一帧,视频放完停留在最后一帧。 13. 支持播放音频文件。可以显示音频文件封面。 14. 鼠标左键双击放大. 全屏播放 15. 鼠标右键或者空格键切换暂停与播放状态 16....鼠标放在进度条可以实现画面预览 17. 滚动条支持点击跳转拖动. 18. 支持音量调整、拖动或者点击. 19. 支持静音切换. 20. 支持播放列表添加,选中右下角复选框,可以打开播放列表。...: 鼠标左键双击屏幕可以全屏播放,再次双击可以还原界面: 鼠标放在滚动条可以预览视频画面: 点击工具栏倍速按钮,选择倍速播放点击工具栏旋转按钮,旋转图像: 点击 工具栏拍照按钮,截图当前视频帧保存到视频播放器同级目录下...: 鼠标滚轮可以向前或者向后滚动,单帧播放画面: 点击工具栏下一个和上一个按钮,可以根据播放列表切换当前播放视频: 点击复位按钮可以重头播放点击工具栏喇叭,可以切换静音状态,拖动或者点击滑块可以调整音量...鼠标右键或者空格键切换暂停与播放." "4. 鼠标放在进度条可以实现画面预览." "5. 滚动条支持点击跳转拖动." "6.

5.4K31

AVKit框架详细解析(四) —— 基于AVKit 和 AVFoundation框架视频流App构建

下载好材料打开 TravelVlogs.xcodeproj 并转到 VideoFeedView.swift。 注意:视频可能无法模拟器播放真实设备运行该应用程序将缓解该问题。...构建并运行该项目,您将看到一个应用程序,该应用程序已经设置了一个充满潜在视频表格,供您观看。 您目标是在用户点击其中一个单元格显示视频播放器。 1....这就是应用程序如何用数据填充现有列表方式。 视频本身来自嵌入应用程序包 JSON 文件。 如果您好奇,您可以查看 Video.swift 以了解它们是如何获取。...这包括一个播放按钮、一个静音按钮和用于前进和后退 15 秒跳过按钮。 2. Adding Remote Playback 那很容易,对吧? 如何从远程 URL 添加视频播放? 那一定要难很多!...您会在左上角看到画中画按钮……否则不会! 缺点是,撰写本文,iOS 14.5是可用最新版本,VideoPlayer SwiftUI 视图未显示画中画按钮

6.9K10

IOS开发之简单音频播放

在用到UI控件如果很好理解之前博客OCTarget-Action回调模式,感觉控件用法会很顺手。下面的简易播放器没有用到多高深技术,只是一些基本控件和View使用。         ...话不多说简单介绍一下今天音频播放器。播放我们用到了UIProgressView(进度条)来显示音频播放进度,用UILabel显示播放的当前时间和总时间。...1.功能介绍:     ​    ​点击播放播放默认歌曲,同时显示播放进度播放当前时间,下面的slider可以调节音频声音大小。     ​ ​...) AVAudioPlayer *player;   //暂停和播放回调此按钮 -(void)tapSegment;   //更新歌曲时间 -(void)time;   //改变声音大小 -(void...下面的定时器是1秒重复调用我们当前viewtime方法,time方法我们会获取当前音频的当前播放时间,并在lable显示,稍后会提到    ​ 1 2 //设置时间,每一秒钟调用一次绑定方法

1.6K60

Vue3开发:视频播放器video.js使用详解

如果是Object则可以对控制栏按钮进行设置,这里就说说默认显示几个属性: playToggle:是否显示播放按钮 progressControl:是否显示进度条。...除了boolean,还可以设置一个ProgressControlOptions对象,更详细配置进度条。 volumePanel:是否显示音量。...bigPlayButton 视频显示播放按钮。这样同样需要controls为true,否则设置为true也不会显示。...不过chrome并不是完全禁止自动播放音频,而且要求在有用户交互行为前不允许自动播放音频,所以刚打开页面的时候(刷新后)是不能自动播放音频,但是如果用户有了交互,那么后续音频都可以自动播放了。...视频实际是受音频影响,所以静音的话是可以自动播放。目前一般有两种方式:一种就是视频不自动播放,由用户点击播放;一种就是静音自动播放,由用户自己打开声音。

5.1K30

微信小程序中将图片与音乐制作成MV

最近一直开发一个类似于小年糕微信小程序,开发制作MV功能 ,花费了一些心思,其间主要遇到了以下一些问题点: 1. 上传图片动画效果如何播放视频一样实现播放与暂停? 2....用户上传图片数量不确定,音乐没有播完之前,上传图片太多太少将如何处理? 3. 如何让展现歌词与当前播放那一句保持同步,即唱哪一句就显示哪一句? 4....当前音乐播放时间如何与自定义进度条进度保持一致? 针对以上问题,首先我们来看一下实现效果, ?...播放,将每一句歌词播放时间与音乐当前播放时间进行了对比,如果歌词播放时间大于等于当前音乐播放时间,并且小于一下句歌词播放时间就显示该歌词,否则不显示。...以上就是问题解决方案,下面是实际代码,实际代码,我还加入了拖拽进度条快进快退、页面显示、页面隐藏、页面销毁对音乐播放一些处理。

2K30

最新iOS设计规范五|3大界面要素:控件(Controls)

当列表中有详情展开按钮点击按钮显示附加信息,点击其他位置则选择行APP自定义行为。...进度条是非交互式,但通常伴有用于取消相应操作按钮。 ? 保持进度条准确性。不要只是为了让进度看起来很快而显示不正确进度信息,进度条只能用于可量化任务。否则请使用加载器(转菊花)。...将进度条用于持续时间明确任务。进度条非常适合显示任务状态,尤其是当它帮助传达任务需要完成多长时间导航栏和工具栏隐藏轨道未填充部分。默认情况下,进度条轨道包含已填充和未填充部分。...通过菜单,您可以无需向主界面添加按钮情况下为用户提供澄清动作目标自定义动作行为方法。例如: · 当用户点击应用“添加”按钮,您可以显示一个菜单,让用户指定要添加项目。...十二、滑杆(Sliders) 滑块是带有一个称为“拇指”控件水平轨道,你可以用手指滑动该控件以最小值和最大值之间移动,例如屏幕亮度调节媒体文件播放期间位置调节。

8.5K30

iOS视频播放基本方法

但是AVPlayer本身是不能直接显示视频,必须创建一个播放层AVPlayerLayer并将其添加到其他视图Layer才能显示。 1....获取当前播放时间与总时间 在此之前我们需要首先了解一个数据类型,也就是上述操作CMTime, AVPlayer使用我们会经常用到它,其实CMTime是一个结构体如下: typedef...,是检测播放状态变为AVPlayerStatusReadyToPlay时候获取 //视频总时长,AVPlayerItem状态为AVPlayerStatusReadyToPlay获取 CMTime...当播放进度改变时候方法回调会被执行。...滑块拖拽修改视频播放进度 //UISlider响应方法:拖动滑块,改变播放进度 - (IBAction)sliderViewChange:(id)sender { if(self.player.status

4.2K20

qt实现视频播放

本篇博客介绍如何利用qMediaPlayer和qvideowidget实现视频文件(avi,mp4….)播放,并且提供进度显示,还可以通过拖动进度条来变换播放位置。...它包括一个QMediaplayer,一个QVideoWidget,一个播放按钮,一个停止按钮,一个载入按钮,和进度条PlayerSlider。...m_bPressed) setValue(i64Progress); } 这个类作用有3个:1)接收QMediaPlaer发来进度信息,更新进度条;2)当用户操作进度条,不再让进度条响应...QMediaPlaer发来进度信息;3)当用户完成对进度条拖动后,向QMediaPlaer发送播放位置更新信息。...QPalette,是因为假如不这样,程序启动,m_pPlayer不是黑色,而是与背景同样颜色,显得不好看。

3.1K20

这 12 个实用 HTML标签(组件)建议尽早用上

大家好,今天给大家分享一篇阅读文章,本篇文章主要讲了 12 个 HTML 标签(组件),通过这些标签避免你项目中集成复杂第三方组件,比如日历组件、颜色选择、进度条等......Player) 如果从头写个音频播放器是一个费时费力又有挑战性工作,但是你现在可以使用 标签就能很轻松调用。...系统音频播放器,示例效果如下所示: 示例地址:https://codepen.io/madarsbiss/pen/oNevrEb 四、视频播放器(Video Player) 我们不仅能很方便调用系统音频组件...九、图片标签(Picture Tag) 有时候需要在不同分辨率下显示不同图片,如果你使用 标签的话,你需要做工作就会许多,但是使用 标签就能很轻松完成不同分辨率下显示不同图片设置...,调整浏览器大小,就会根据窗口大小显示不同大小图片,示例效果如下所示: 示例地址:https://codepen.io/madarsbiss/pen/abybomY 十、进度条(Progress

89530

基于Qt音乐播放器(二)切换歌曲,调节音量,调节语速,暂停

投票地址:点击为我投票 ---- 文章目录 1.切换歌曲 2.调节音量 3.调节语速 4.播放/暂停 5.我们来看下效果 6.关于一篇提到播放卡顿,拖动进度条导致音乐不正常播放,已解决。...---- 项目下载 GitHub 前一篇:基于Qt音乐播放器(一)添加音频文件,播放音乐,更新进度条 先说一下,针对上一次ui界面,这次做了重新设计,第一张是以前,第二张是现在设计,不要喷我按钮...ui设计,比如点击切换对应图片,我们先不讲,这里一篇简单介绍了如何布局和美化页面点击进入,如果大家需求高的话,会考虑再写一篇有关ui进阶,好好讲一下如何设计ui,完整项目已上传github,自行下载...---- 2.调节音量 可以看到ui中有一个喇叭,旁边有一个进度条,我们实现拖动进度条改变音量,而直接点击喇叭则静音。 1.喇叭按钮,选择clicked()槽函数。...(:/lib/1zantingtingzhi.png);"); player->play(); } ---- 5.我们来看下效果 ---- 6.关于一篇提到播放卡顿,拖动进度条导致音乐不正常播放

1.7K10

HTML5 标签audio添加网页背景音乐代码

controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。 loop loop 如果出现该属性,则每当音频结束重新循环开始播放。...preload preload 如果出现该属性,则音频页面加载进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。 src url播放音频 URL。...对于图像,PNG、JPEG GIF 格式文件在任何浏览器都能加载到您网页里。遗憾是,音频文件并非如此。表 1 展示了网页可以使用音频文件格式,但是并非所有格式都能用于所有浏览器。...这不是无法单一音频标准达成一致浏览器制造商不妥协问题,而是涉及专利权和特许权使用费法律和财务问题。不受软件专利限制 OGG 格式旨在一劳永逸地解决这个问题。...下面的图 1 展示了这些浏览器控件外观。 图1:不同浏览器音频控件 除了 Chrome 浏览器外,所有浏览器都有开始/暂停控件、进度条滑块播放秒数、音量/静音控件,还显示声音文件总秒数。

11.3K31

怎么用 JavaScript 构建自定义 HTML5 视频播放

有需要的话,你可以克隆到自己机器并在编辑器打开。你将分别在 index.html 和 style.css 中找到播放标记文档文件及其样式,以及我们用来测试播放视频文件。...通过点击浏览器播放按钮对其测试。它应该正确地播放和暂停视频。 这实际为本教程其他部分定下了基调。我们通常会选择一个视频控件,创建一个实现特定功能函数,通过事件监听器将其连接起来。...上面,我们有 progress 元素,用于显示任务进度条,而 range 类型 input 允许我们快速无缝浏览视频。...当视频被播放,你应该看到进度条更新。 预先跳转 大多数播放器都允许你点击进度条跳转到视频指定点,我们视频播放器也将一样。...这里是实操效果: 点击视频播放或者暂停 很多视频播放器应用点击视频本身能够快速进行播放或者暂停,所以,我们播放也实现它。

10.8K20
领券