HTML audio问题？

来源：蜘蛛抓取(WebSpider) 时间：2022-06-04 07:36 标签： html audio标签

我使用下面的代码在浏览器中

音频标签的高度是不正确调整显示音频，谁能告诉我如何增加音频标签的高度。

但是，您可以在Firefox中使用style="height: 300px;"，这只会呈现为控件上方的大空白区域。 （然而，如预期的那样，在空间中单击会使音频播放。）

但它有一些事件可以运行功能，还有一个源标签，其中包含要播放的歌曲的路径以及歌曲的类型。

之前写过一篇同样关于Cocos2d-JS H5的音频播放相关的文章： ，其中提到了移动端上H5的声音播放需要在用户操作后且必须在操作后一定时间内的问题，这次记录的问题也与此问题有关，直接现象为Cocos2d-JS（我用的3.13 lite版，通过js-builder获取：，本文所描述问题可能仅与此版本相关！）的H5游戏在设备上播放的音乐音效不受键影响，无法根据键静音！
做过音频相关原生开发的应该知道，通过对AVAudioSession的Category设置来决定应用的音频播放所属的分类，从而决定是否受静音键的影响，比如，静音开关开启的时候，短信音，Push消息提示音之类的会不播放，但优酷视频，虾米音乐之类的应用的音频还是会播放，不受影响，具体参考如下：

混音播放，可以与其他音频应用同时播放
播放和录音，此时可以录音也可以播放
硬件解码音频，此时不能播放和录制
多种输入输出，例如可以耳机、USB设备同时播放


而实际上上如果是实现音乐视频播放器的话，应该不响应的静音键，但要是游戏的BGM或者音效的话显然还是应该响应静音键开关的，这点比如最近开放的Facebook Instant Game的发布checklist里就提到了：

而实际测试发现通过cc.audioEngine.playMusic播放的BGM并不会响应静音键，而且仔细观察后发现，这种方式播放的游戏背景音乐会被当做音乐播放器播放的音乐处理，在iOS的下拉菜单中能看到有音乐在播放，如下图：
显然，这样的话就不属于响应静音键的AVAudioSessionCategory了，查询的以及一些example、其它H5游戏后发现，正如上面FB的checklist里提到的，通过WebAudio方式播放的音频是可以响应静音键的，即也不会作为iOS系统的音乐播放器音频播放。查看-v3.13.js引擎代码中发现是有WebAudio支持的，并且在iOS设备上各种艰难的查log后发现WebAudio的支持也正确被启用了，省略中途若干其它调试读引擎源码的过程，最终发现问题所在：


      

      

        均不会以WebAudio方式生成audio，因此，现在的bgm并不会响应静音键！暂时的解决方法是去掉所有音频的preload，并且所有bgm类音频与音效一样使用playEffect播放，修改后测试音频已可以正常响应静音键。
      

      

        PS: 开头提到本文记录的问题和之前写过的移动端用户操作后才能播音频的问题有关，这部分情况是这样，在检查WebAudio的过程中，发现Cocos2d-JS引擎实际上是处理了这个问题的，具体可参考cc.Audio.play：
      

      

      

        可以看到，引擎通过加入touchPlayList以及监听canvas的触摸事件来延迟到下一次触摸操作后自动播放touchPlayList里的音频，从而绕开移动端上的这个限制的，所以也可以直接把这个问题交给引擎处理，但貌似仅限于通过playEffect播放。
      

      

        

          如您在评论中需要提及如QQ号、电子邮件地址或其他隐私敏感信息，欢迎使用>><<处理后发布，原文只有博主可以看到。
        

      

    

  



                            

                                                    

                                

  
    
    
  • 
      
    
        回答 2 已采纳 用相对路径，你的html放到和你视频同一个盘去，不要用物理路径，用../../或者xxx/xxx。。来定位 发布了通过http访问这个路径得和你网站路径一直
      
    
    
    • 
    
  • 
      
    
        回答 6 已采纳 给移动端网页增加viewpoint，不过样式布局需要重新调整过。建议增加viewpoint+媒体选择器，这样一套html代码就能实现pc和移动端兼容显示，不需要做2个页面，如现在流行的bootstra
      
    
    
    • 
    
  • 
      
    
        备用(当浏览器不支持audio时显示的内容)audio 的控制函数主要有：控制函数 功能说明load() 加载音频、视频软件，通常不必调用，除非是动态生成的元素，用来在播放前预加载play() 加载并播放音频、视频文件，除非文件...
      
    
    
    • 
    
  • 
      
    
        整理归纳一些之前记录的h5兼容性问题以及相应的解决方法，大多都是移动端的，持续更新… 1、iOS滑动卡慢 ios里父元素设置overflow:auto或scroll时，子元素滚动时没有滚动惯性，手指离开屏幕就立即停止滚动，所以会...
      
    
    
    • 
    
  • 
      
    
        webm等格式，但有个很重要的音乐文件格式midi(扩展名mid)却在各大浏览器中都没有内置的支持。不是所有的浏览器都支持MP3OGG之类的，每个浏览器因为版权的问题支持的格式...
      
    
    
    • 
    
  • 
      
    
        回答 2 已采纳 电脑不支持touchstart事件，你怎么测试的。。。。。换click事件试试
      
    
    
    • 
    
  • 
      
    
        HTML:一种超文本标记语言，是一种标识性的语言，包括一系列的标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet连接为一个逻辑整体。HTML5技术结合了HTML4.01的相关标准并革新，符合现代网络发展要求...
      
    
    
    • 
    
  • 
      
    
        众所周知，在HTML5诞生之前网页上要播放一段视频基本都是依靠flash插件，而HTML5诞生了和标签，使得在HTML5上播放视频或者音频就像显示图片那么轻松如果我们现在不需要使用浏览器内部的audio控件，可用自己的脚本...
      
    
    
    • 
    
  • 
      
    
        回答 3 已采纳 你没有给你说的那个div设置一个宽的定值啊，它的宽度是由内容撑开的，你的内容宽度具有不确定性，css的width值本来就允许存在小数，所以显示小数没什么问题，你想要它是整数得要自己固定值啊
      
    
    
    • 
    
  • 
      
    
        回答 3 已采纳 应该是你没有添加 type 这个类型，它初始话的时候可能有点问题。我在谷歌浏览器上测试一直可以。 ``` ``` 你可以先放一个 mp4 或者 mp3 试一试，会不会是添加两个有冲突。
      
    
    
    • 
    
  • 
      
    
        回答 3 已采纳 高版本chrome，Firefox不允许自动播放声音，视频的话可以muted静音后自动播放。声音需要和用户交互后如点击页面后才会播放。可以给document添加click事件执行播放操作，不过不点击就
      
    
    
    • 
    
  • 
      
    
        做一个SPA的web互动测试游戏。题目是自动切换播放的音频，根据音频内容...下面是关于audio兼容性图表： 可以看到，在移动端上用Audio是完全可行的（理论上是这样，实际操作你们懂的）。 第二步，我们查...
      
    
    
    • 
    
  • 
      
    
        这种语义化标签主要针对搜索引擎，移动端更加喜欢使用这种类型的标签。...关于H5语义化标签在ie9不兼容问题描述 在ie9里面h5上面的标签都属于行内元素，要解决这个问题的话需要加上display：bloc
      
    
    
    • 
    
  • 没有解决我的问题, 去提问
    
    • 
  



                            

                                                

                    

                

            

            


            

                
我要回帖

                

                    

                        
                        
                    

                

            

            

                        

                
更多关于 html audio标签 的文章

                

                    
                

            

                    

        

            

                
 

                


                

            

            

            

                
随机推荐