网页播放一个audio暂停其他audio

Posted 2023-04-24

<audio controls src="xxx.mp3"></audio>

<audio controls src="xxx.mp3"></audio>

<audio controls src="xxx.mp3"></audio>

网页上面放了多个audio，点击播放1，再点击播放2，然后1和2是同时播放的，怎么设置点击2就暂停1，点击哪个就播放哪个，之前的就暂停。

不能用播放器列表的形式。

我是做一个，每个音频对应一个图片，点击图片播放音频。
比如，小猫图片，小狗图片，铃声图片。。点击小猫就猫叫，点击小狗就狗叫，点击铃声就播放铃声，铃声播放一半了点击其他的，铃声就停止。。暂停或者停止都行，最好是停止，再次点击铃声就从头播放。。

基本都最好了，现在主要的问题就是，点击多个都同时播放了，不能暂停其他的，求解决办法。。

怕大家不明白，写的比较啰嗦。

1. System Sound Services
System Sound Services 是最底层也是最简单的声音播放服务，调用 AudioservicesPlaySystemSound 这个方法就可以播放一些简单的音频文件，使用此方法只适合播放一些很小的提示或者警告音，因为它有很多限制：
■ 声音长度要小于 30 秒
■ In linear PCM 或者 IMA4 (IMA/ADPCM) 格式的
■ 打包成 .caf, .aif, 或者 .wav 的文件
■ 不能控制播放的进度
■ 调用方法后立即播放声音
■ 没有循环播放和立体声控制
另外，它还可以调用系统的震动功能，方法也很简单。具体的代码可以参考官方的示例 SysSound
，但是官方的示例只有一些简单的用法，从文档中我们发现可以通过 AudioServicesAddSystemSoundCompletion 方法为音频播放添加 CallBack 函数，有了 CallBack 函数我们可以解决不少问题，比如可以克服 System Sound Services 本身不支持循环播放的问题。

2. AVAudioPlayer 类

AVAudioPlayer 是 AVFoundation.framework 中定义的一个类，所以使用要先在工程中引入 AVFoundation.framework。我们可以把 AVAudioPlayer 看作是一个高级的播放器，它支持广泛的音频格式，主要是以下这些格式：
■ AAC
■ AMR(AdaptiveMulti-Rate, aformatforspeech)
■ ALAC(AppleLossless)
■ iLBC(internetLowBitrateCodec, anotherformatforspeech)
■ IMA4(IMA/ADPCM)
■ linearPCM(uncompressed)
■ µ-lawanda-law
■ MP3(MPEG-1audiolayer3
AVAudioPlayer 可以播放任意长度的音频文件、支持循环播放、可以同步播放多个音频文件、控制播放进度以及从音频文件的任意一点开始播放等，更高级的功能可以参考 AVAudioPlayer 的文档 。要使用 AVAudioPlayer 的对象播放文件，你只需为其指定一个音频文件并设定一个实现了 AVAudioPlayerDelegate 协议的 delegate 对象。
只要将 AVAudioPlayer 的 numberOfLoops 属性设为负数，音频文件就会一直循环播放直到调用 stop 方法。
AVAudioPlayer 同样支持 Callback，这是 AVAudioPlayerDelegate 的一个可选 delegate 方法：
- (void ) audioPlayerDidFinishPlaying: (AVAudioPlayer *) player successfully: (BOOL ) flag
if (player == self .player && flag == YES)
NSLog(@"Playback finish." );


另外，你可以随时控制 AVAudioPlayer 对象的播放、暂停以及停止，通过判断对象的状态，分别调用 play、pause 和 stop 方法即可：
- (IBAction) playOrPause: (id ) sender
// if playing, pause
if (self .player.playing)
[self .player pause];
// if stopped or paused, start playing
else
[self .player play];

虽然 AVAudioPlayer 可以播放很多格式，但是我们在实际开发过程中还是最好使用一些没有压缩的格式，比如 WAVE 文件，这样可以减少系统处理单元的资源占用，以便更好的完成程序的其他功能。另外，在使用 AVAudioPlayer 连续播放 mp3 这类经过压缩的音频文件时，在连接处可能出现一定的间隔时间。
3. Audio Queue Services
如果以上两种音频播放的解决方案都无法满足你的需求，那么我想你肯定需要使用 Audio Queue Services。使用 Audio Queue Services 对音频进行播放，你可以完全实现对声音的控制。例如，你可以在声音数据从文件读到内存缓冲区后对声音进行一定处理再进行播放，从而实现对音频的快速/慢速 播放的功能。
因为 Audio Queue Services 相对复杂很多，Apple 官方已经把它整理为一本书了，具体可以参考 Audio Queue Services Programming Guide 和 SpeakHere 的程序示例。
4. OpenAL
OpenAL 是一套跨平台的开源的音频处理接口，与图形处理的 OpenGL 类似，它为音频播放提供了一套更加优化的方案。它最适合开发游戏的音效，用法也与其他平台下相同。
本篇主要讲AVAudioPlayer，
AVAudioPlayer类封装了播放单个声音的能力。播放器可以用NSURL或者NSData来初始化，要注意的是NSURL不可以是网络url而必须是本地文件url，因为AVAudioPlayer不具备播放网络音频的能力。
一个AVAudioPlayer只能播放一个音频，如果你想混音你可以创建多个AVAudioPlayer实例，每个相当于混音板上的一个轨道。
一、创建一个播放器

AVAudioPlayer *player = [[AVAudioPlayeralloc] initWithContentsOfURL:[NSURLfileURLWithPath:[[NSBundlemainBundle] pathForResource:@"星月神话" ofType:@"mp3"]] error:nil];//使用本地URL创建

AVAudioPlayer *player = [[AVAudioPlayer alloc] initWithData:Data error:nil];//使用NSData创建
我之前讲过AVAudio不可以播放网络URL，但是可以播放NSData,我们似乎受到了启发，我们可以通过网络URL去创建NSData，然后再通过AVAudioPlayer来播放NSData，这样是不是就可以播放网络音乐了?但是此法并不可取，因为AVAudioPlayer只能播放一个完整的文件，并不支持流式播放，所以必须是缓冲完才能播放，所以如果网络文件过大抑或是网速不够岂不是要等很久？所以播放网络音频我们一般用音频队列。
二、播放器属性
创建一个AVAudioPlayer以后你就可以对它的各种属性进行访问或设置了。

1、音量

player.volume =0.8;//0.0-1.0之间

2、循环次数

player.numberOfLoops =3;//默认只播放一次

3、播放位置

player.currentTime =15.0;//可以指定从任意位置开始播放

4、声道数

NSUInteger channels = player.numberOfChannels;//只读属性

5、持续时间

NSTimeInterval duration = player.duration;//获取持续时间

6、仪表计数

player.meteringEnabled =YES;//开启仪表计数功能
[playerupdateMeters];//更新仪表计数

三、播放声音

[player prepareToPlay];//分配播放所需的资源，并将其加入内部播放队列
[playerplay];//播放
[playerstop];//停止

四、代理方法

这个类对应的AVAudioPlayerDelegater的委托方法。 audioPlayerDidFinishPlaying:successfully: 当音频播放完成之后触发。当播放完成之后，可以将播放按钮的文本重新回设置成：Play Audio File

- (void)audioPlayerDidFinishPlaying:(AVAudioPlayer *)player successfully:(BOOL)flag

//播放结束时执行的动作
[audioButton setTitle:@"Play Audio File" forState:UIControlStateNormal];


- (void)audioPlayerDecodeErrorDidOccur:(AVAudioPlayer *)player error:(NSError *)error;

//解码错误执行的动作


- (void)audioPlayerBeginInterruption:(AVAudioPlayer *)player;

//处理中断的代码


audioPlayerEndInterruption:，当程序被应用外部打断之后，重新回到应用程序的时候触发。在这里当回到此应用程序的时候，继续播放音乐。
- (void)audioPlayerEndInterruption:(AVAudioPlayer *)player

[audioPlayer play];

AVAudioPlayer就介绍到这吧。追问

复制那么多自己看得懂吗？网页调用音频的代码呢？

参考技术A 想问下现在这个问题解决了吗，我现在也遇到一样的问题想问下怎么解决的呢，可以出个demo吗，谢谢啦追问

没有解决哈，我就音频都弄了短一些。。要是长音频的话建议你还是用播放列表，网上的播放器带列表的也很多

audio音乐播放

1.audio标签

1  <audio    @play="ready"  @error="error"  ref="audio" :src="currentSong.url"></audio>

2.中间圆cd和播放/暂停按钮动画

1   playIcon(){
2           return this.playing ? ‘ iconfont  icon-pause-‘ : ‘iconfont  icon-bofang1‘
3         },
4         cdCls(){
5           return this.playing ? ‘play‘ :‘play pause‘
6         }

3.通过mutations来设置播放/暂停----上一首/下一首-----min/normal播放

1  methods:{
2         ...mapMutations({
3           setFullScreen:‘SET_FULL_SCREEN‘,
4           setPlayingState:‘SET_PLAYING_STATE‘,
5           setCurrentIndex:‘SET_CURRENT_INDEX‘,
6         }),
7         mini(){//当电机及此按钮的时候，将全屏显示转换为“迷你播放”
8           this.setFullScreen(false)
9         },

4.监听currentsong的变化，当currentsong发生变化的时候,让歌曲播放；

1  currentSong(){//一点击歌曲进来的时候是播放状态
2           this.$nextTick(()=>{
3             this.$refs.audio.play()
4           })
5         },

5.监听playing的播放状态

1   playing(newPlaying){//监听是否在播放---切换播放暂停状态
2           console.log(newPlaying)
3           const audio = this.$refs.audio
4           newPlaying ? audio.play() : audio.pause()
5         }

6.上一曲/下一曲切换：

 1   prev(){//点击上一首/下一首切换其实就是切换歌曲的播放索引，让其+1/-1；audio由一个ready属性，来确认是否准备好播放，来阻止用户的连续多次点击；
 2           if (!this.songReady) {
 3             return
 4           }
 5             let index = this.currentIndex -1
 6           if(index ===1){
 7               index = this.playlist.length -1
 8           }
 9           this.setCurrentIndex(index)
10           if(!this.playing){
11               this.togglePlaying()
12           }
13         },
14         next(){
15           if (!this.songReady) {
16             return
17           }
18           let index = this.currentIndex + 1
19           if (index === this.playlist.length){
20             index = 0
21           }
22           this.setCurrentIndex(index)
23           if(!this.playing){//当暂停时候点击播放的情况
24             this.togglePlaying()
25           }
26         },
27         ready(){
28             this.songReady = true
29         },