zoukankan      html  css  js  c++  java
  • html5 audio实现播放音频几种方法

    1,下面是一个播放音乐的最简单样例
    (controls属性告诉浏览器要有基本播放控件)
    原文:HTML5 - 使用<audio>播放音频
    
    <audio src="hangge.mp3" controls></audio>
    2,预加载媒体文件
    设置preload不同的属性值,可以告诉浏览器应该怎样加载一个媒体文件:
    (1)值为auto:让浏览器自动下载整个文件
    (2)值为none:让浏览器不必预先下载文件
    (3)值为metadata:让浏览器先获取音频文件开头的数据块,从而足以确定一些基本信息(比如音频的总时长)
    <!-- 用户点击播放才开始下载 -->
    <audio src="hangge.mp3" controls preload="none"></audio>
    3,自动播放
    使用autoplay属性可以让浏览器加载完音频文件后立即播放。(如果想用来作为背景音乐的话可以把controls属性去掉)
    <audio src="hangge.mp3" controls autoplay></audio>
    4,循环播放
    使用loop属性让音乐播放结束时,在从头开始播放。
    <audio src="hangge.mp3" controls loop></audio>
    
    有时我们需要使用js来控制播放器实现音乐的播放,暂停。或者使用js播放一些音效。
    1,通过JavaScript控制页面上的播放器
    比如把页面上添加一个<audio>用来播放背景音乐(由于controls属性未设置,我们是看不见播放界面的)
    <audio id="bgMusic">
    <source = src="hangge.mp3" type="audio/mp3">
    <source = src="hangge.ogg" type="audio/ogg">
    </audio>
    通过pause()和play()方法可以使音乐暂停和继续播放(结合currentTime属性可以实现停止和重新播放)
    var audio = document.getElementById("bgMusic");
    
    //播放(继续播放)
    audio.play();
    
    //暂停
    audio.pause();
    
    //停止
    audio.pause();
    audio.currentTime = 0;
    
    //重新播放
    audio.currentTime = 0;
    audio.play();
    2,也可以动态的创建<audio>元素
    //方式1
    var audio = document.createElement("audio");
    audio.src = "hangge.mp3";
    audio.play();
    
    //方式2
    var audio = new Audio("hangge.mp3");
    audio.play();
    通过canPlayType()方法可以判断浏览器支持的编码方式,从而设置对应的音频文件。
    if (audio.canPlayType("audio/mp3")) {
    audio.src = "hangge.mp3";
    }else if(audio.canPlayType("audio/ogg")) {
    audio.src = "hangge.ogg";
    }

    HTML5 audio与video标签实现视频播放,音频播放

    Web端直接播放 .ts 视频

    html原生video标签部分手机浏览器无法自动播放视频解决

  • 相关阅读:
    yum error
    Linux如何查询内存真实利用率
    管理工作
    top 详解
    炒股
    vsftp+apache中文乱码问题
    生活像杯咖啡
    vmware workstation 9 nat setting
    cp文件
    WPF 数据分页控件改进
  • 原文地址:https://www.cnblogs.com/it-tsz/p/13946737.html
Copyright © 2011-2022 走看看