zoukankan      html  css  js  c++  java
  • HTML5之audio属性

    audio主要支持的音频格式:

    mp3  ogg wav

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>audio</title>
    </head>
    <body>
        <!-- 方法一 -->
        <audio controls>
            <source src="data/imooc.mp3"></source>
        </audio>
    
        <!-- 方法二 -->
        <audio controls src="data/imooc.mp3"></audio>
    </body>
    </html>

     source的级别没有直接在audio中写src高

    关于兼容性:

    mp3 所有浏览器都兼容

    ogg  safari浏览器不兼容,其他都可

    wav 所有浏览器都兼容

    可以使用JS生成audio对象

        <button id="btn">play</button>
        <script>
            var myaudio=new Audio();
            myaudio.src="data/imooc.mp3";
    
            //谷歌和欧朋不能直接播放,必须与事件交互
            //其他浏览器可以
            btn.onclick=function(){
                myaudio.play();
            }
        </script>

    audio标签属性

    autoplay 自动播放,谷歌和欧朋不能自动播放(和video的区别是即使设置了静音也不会自动播放)

    <audio controls src="data/imooc.mp3" autoplay></audio>

    没有width和height属性,需要通过style来控制

    <audio controls src="data/imooc.mp3" autoplay width="500"></audio>

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>audio</title>
        <style>
            audio{
                width:500px;
            }
        </style>
    </head>
    <body>
        <audio controls src="data/imooc.mp3" autoplay></audio>
    </body>
    </html>

  • 相关阅读:
    1-6注册View Prism官网案例学习
    MVVM复习
    Prism常用类库翻译
    SqlHelper
    ADO.NET复习
    C#复习思维导图
    网络通信基础知识1
    网络通信
    Linux-线程同步之互斥锁
    linux-线程同步之信号量
  • 原文地址:https://www.cnblogs.com/chenyingying0/p/12405330.html
Copyright © 2011-2022 走看看