html5 audio 使用一般处理程序返回音频后，无法快进

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html5 audio 使用一般处理程序返回音频后，无法快进相关的知识，希望对你有一定的参考价值。

<audio src="Handler/GetMusic.ashx" controls="controls">
您的浏览器不支持 audio 标签。
</audio>

public class GetMusic : IHttpHandler

public void ProcessRequest(HttpContext context)

context.Response.ContentType = "audio/mpeg";
context.Response.WriteFile("1.mp3");
context.Response.End();



音乐能够正常播放，但点击播放的进度条，无法快进，求解决方案，可追分
audio.currentTime = 20; //跳转快进

audio 的路径直接使用 音频路径时，即 audio.src = "1.mp3" 快进是可以使用的
但 audio.src = "Handler/GetMusic.ashx" 时，快进却无效

推荐你采用JS控制

既然看到送你一个demo吧，自行研究，应该都很详细了

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/>
    <link rel="shortcut icon" href="img/logo.png">
    <title>html5 audio音频播放</title>
    <style>
        * margin: 0; padding:0;
        body-webkit-tap-highlight-color: rgba(0,0,0,0); font-family: "微软雅黑"
        h1 width: 100%; font-size: 1.5em; text-align: center; line-height: 3em; color:#47c9af; 
        #audio width: 100%;
        #control width: 150px; height: 150px; line-height: 150px; text-align: center; border-radius: 200px; border:none; color:#fff; margin-top: -75px; margin-left:-75px; left:50%; top:50%; position: absolute; box-shadow: #888 0 0 8px;
        .color_gray background: #e4e4e4
        .hide display: none;
        .show display: block;
        .play background:  #f06060;
        .pause background:skyblue
        /*进度条样式*/
        .progressBar width: 100%; height: 10px;margin: 30px auto 30px auto; position:absolute; left: 0; bottom: 35px;
        .progressBar div position: absolute;
        .progressBar .progressBac width: 100%; height: 10px;  left: 0; top:0; background: #e4e4e4;
        .progressBar .speedwidth: 100%; height: 10px; left: -100%; background: #f06060; 
        .progressBar .drag width: 30px; height: 30px; left: 0; top:-10px;  background: skyblue; opacity: 0.8; border-radius: 50px; box-shadow: #fff 0 0 5px;
        /*时间样式*/
        #time width: 100%; height: 20px;position: absolute; left: 0; bottom:30px; color:#888;
        .tiemDetail position: absolute; right:10px; top:0;
        #songInfooverflow: hidden; width: 200px; height:50px; line-height: 50px; text-align: center; color:#34495e;   margin-top: -25px; margin-left:-100px; left:50%; top:70%; position: absolute;
        .shareImg position: absolute; left: 100000px;
    </style>
</head>
     
<body>
    <script>
$(function() 
    getSong();
)
 
//获取歌曲链接并插入dom中
function getSong() 
    var audio = document.getElementById("audio");
    audio.src = "

    audio.loop = true; //歌曲循环
    playCotrol(); //播放控制函数
 

 
//点击播放/暂停
function clicks() 
    var audio = document.getElementById("audio");
    $("#control").click(function() 
        if ($("#control").hasClass("play")) 
            $("#control").addClass("pause").removeClass("play");
            audio.play();//开始播放
            dragMove();//并且滚动条开始滑动
            $("#control").html("暂停播放");
         else 
            $("#control").addClass("play").removeClass("pause");
            $("#control").html("点击播放");
            audio.pause();
        
    )

 
//播放时间
function timeChange(time, timePlace) 
    var timePlace = document.getElementById(timePlace);
    //分钟
    var minute = time / 60;
    var minutes = parseInt(minute);
    if (minutes < 10) 
        minutes = "0" + minutes;
    
    //秒
    var second = time % 60;
    seconds = parseInt(second);
    if (seconds < 10) 
        seconds = "0" + seconds;
    
    var allTime = "" + minutes + "" + ":" + "" + seconds + ""
    timePlace.innerHTML = allTime;

 
//播放事件监听
function playCotrol() 
    audio.addEventListener("loadeddata", 
        function() 
            $("#control").addClass("play").removeClass("color_gray");
            $("#control").html("点击播放");
            addListenTouch(); //歌曲加载之后才可以拖动进度条
            var allTime = audio.duration;
            timeChange(allTime, "allTime");
            setInterval(function() 
                var currentTime = audio.currentTime;
                $("#time .currentTime").html(timeChange(currentTime, "currentTime"));
            , 1000);
            clicks();
        , false);
 
    audio.addEventListener("pause",
        function()  //监听暂停
            $("#control").addClass("play").removeClass("pause");
            $("#control").html("点击播放");
            if (audio.currentTime == audio.duration) 
                audio.stop();
                audio.currentTime = 0;
            
        , false);
    audio.addEventListener("play",
        function()  //监听暂停
            $("#control").addClass("pause").removeClass("play");
            $("#control").html("暂停播放");
            dragMove();
        , false);
    audio.addEventListener("ended", function() 
        alert(0)
    , false)

     
//进度条

 var startX, x, aboveX = 0; //触摸时的坐标 //滑动的距离  //设一个全局变量记录上一次内部块滑动的位置
 
//1拖动监听touch事件
function addListenTouch() 
    document.getElementById("drag").addEventListener("touchstart", touchStart, false);
    document.getElementById("drag").addEventListener("touchmove", touchMove, false);
    document.getElementById("drag").addEventListener("touchend", touchEnd, false);
    var drag = document.getElementById("drag");
    var speed = document.getElementById("speed");

 
//touchstart,touchmove,touchend事件函数
 function touchStart(e)  
     e.preventDefault();
     var touch = e.touches[0];
     startX = touch.pageX;
 
 function touchMove(e)  //滑动         
     e.preventDefault();
     var touch = e.touches[0];
     x = touch.pageX - startX; //滑动的距离
     //drag.style.webkitTransform = 'translate(' + 0+ 'px, ' + y + 'px)';      
     drag.style.left = aboveX + x + "px"; // 
     speed.style.left = -((window.innerWidth) - (aboveX + x)) + "px";
 
 function touchEnd(e)  //手指离开屏幕
     e.preventDefault();
     aboveX = parseInt(drag.style.left);
     var touch = e.touches[0];
     var dragPaddingLeft = drag.style.left;
     var change = dragPaddingLeft.replace("px", "");
     numDragpaddingLeft = parseInt(change);
     var currentTime = (numDragpaddingLeft / (window.innerWidth - 30)) * audio.duration;
     audio.currentTime = currentTime;
 
//3拖动的滑动条前进
function dragMove() 
    setInterval(function() 
        drag.style.left = (audio.currentTime / audio.duration) * (window.innerWidth - 30) + "px";
        speed.style.left = -((window.innerWidth) - (audio.currentTime / audio.duration) * (window.innerWidth - 30)) + "px";
    , 500);

</script>
 
<h1>html5 audio 音频播放demo</h1>
 
<!--audiostart-->
<audio id="audio" src=""  loop="loop" autoplay="autoplay" ></audio>
<!--audio End-->
 
 
 
<!--播放控制按钮start-->
<button id="control" class="">loading</button>
<!--播放控制按钮end-->
 
<!--时间进度条块儿start-->
<section class="progressBar">
    <div class="progressBac"></div>
    <div class="speed" id="speed"></div>
    <div class="drag" id="drag"></div>
</section>
<!--时间进度条块儿end-->
 
<!--播放时间start-->
<div id="time"><div class="tiemDetail"><span class="currentTime" id="currentTime">00:00</span>/<span class="allTime" id="allTime">00:00</span></div></div>
<!--播放时间end-->
<!--歌曲信息start-->
<div id="songInfo">没时间-Leinov<div class="shareImg"><img src="img/html5audio.jpg" alt=""></div></div>
<!--歌曲信息end-->
<script src="js/zepto.js"></script>
</body>
</html>

追问

感谢你的回答，代码我已经试过了，并不能解决我的问题。
jquery 已引用，音频路径已补充，最后的脚本看上去没啥用，忽略
能够播放，但使用“一般处理程序返回的音频”无法跳转
就是 audio.currentTime = 20; 无法生效

大神，还有其他方案么

 参考技术A Response.AddHeader("Content-Range", "bytes 0-文件长度-1/文件长度");

增加以上header，让浏览器认为服务器支持断点续传即可。追问

非常感谢您的回答，已经尝试上面说的方法，但是，还是没有效果，无法快进。
不过学到了一个知识点。

大神，还有其他方案么

追答

看看里面的play函数，这个是成功运行了的

本回答被提问者采纳 参考技术B 设置Content-Range，Content-type和Accept-Ranges三个属性后就可以了

HTML 音频(Audio)


声音在HTML中可以以不同的方式播放.



问题以及解决方法


在 HTML 中播放音频并不容易！


您需要谙熟大量技巧，以确保您的音频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。


在本章，菜鸟教程为您总结了问题和解决方法。



使用插件


浏览器插件是一种扩展浏览器标准功能的小型计算机程序。


插件可以使用 <object> 标签 或者 <embed> 标签添加在页面上. 


这些标签定义资源（通常非 HTML 资源）的容器，根据类型，它们即会由浏览器显示，也会由外部插件显示。



使用 <embed> 元素


<embed>标签定义外部（非 HTML）内容的容器。（这是一个 HTML5 标签，在 HTML4 中是非法的，但是所有浏览器中都有效）。


下面的代码片段能够显示嵌入网页中的 MP3 文件：


实例

<embed height="50" width="100" src="horse.mp3">
尝试一下 »


问题:


  • <embed> 标签在 HTML 4 中是无效的。页面无法通过 HTML 4 验证。
  • 不同的浏览器对音频格式的支持也不同。
  • 如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。
  • 如果用户的计算机未安装插件，无法播放音频。
  • 如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。



使用 <object> 元素


<object tag> 标签也可以定义外部（非 HTML）内容的容器。


下面的代码片段能够显示嵌入网页中的 MP3 文件：


实例

<object height="50" width="100" data="horse.mp3"></object>

尝试一下 »


问题:


  • 不同的浏览器对音频格式的支持也不同。
  • 如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。
  • 如果用户的计算机未安装插件，无法播放音频。
  • 如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。



使用 HTML5 <audio> 元素


HTML5 <audio> 元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效。


The <audio> element   works in all modern browsers.


流量器兼容


格中的数字表示支持该属性的第一个浏览器版本号。


元素







<audio>
4.0
9.0
3.5
4.0
10.5


以下我们将使用 <audio> 标签来描述 MP3 文件(Internet Explorer、Chrome 以及 Safari 中是有效的), 同样添加了一个  OGG 类型文件(Firefox 和 Opera浏览器中有效).如果失败，它会显示一个错误文本信息:


实例

<audio controls> <source src="horse.mp3" type="audio/mpeg"> <source src="horse.ogg" type="audio/ogg">
  Your browser does not support this audio format.
 </audio>


尝试一下  »


问题:


  • <audio> 标签在 HTML 4 中是无效的。您的页面无法通过 HTML 4 验证。
  • 您必须把音频文件转换为不同的格式。
  • <audio> 元素在老式浏览器中不起作用。



最好的 HTML 解决方法


下面的例子使用了两个不同的音频格式。HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试 <embed> 元素。


实例

<audio controls height="100" width="100">
  <source src="horse.mp3" type="audio/mpeg"> <source src="horse.ogg" type="audio/ogg">
  <embed height="50" width="100" src="horse.mp3">
 </audio>


尝试一下  »


问题:


  • 您必须把音频转换为不同的格式。


  • <embed> 元素无法回退来显示错误消息。



使用超链接


如果网页包含指向媒体文件的超链接，大多数浏览器会使用"辅助应用程序"来播放文件。


以下代码片段显示指向 mp3 文件的链接。如果用户点击该链接，浏览器会启动"辅助应用程序"来播放该文件：


实例

<a href="horse.mp3">Play the sound</a>


尝试一下 »


内联的声音说明


当您在网页中包含声音，或者作为网页的组成部分时，它被称为内联声音。


如果您打算在 web 应用程序中使用内联声音，您需要意识到很多人都觉得内联声音令人恼火。同时请注意，用户可能已经关闭了浏览器中的内联声音选项。


我们最好的建议是只在用户希望听到内联声音的地方包含它们。一个正面的例子是，在用户需要听到录音并点击某个链接时，会打开页面然后播放录音。



HTML 多媒体标签


New :  HTML5 新标签


标签
描述


<embed>
定义内嵌对象。HTML4 中不赞成，HTML5 中允许。
<object>
定义内嵌对象。
<param>
定义对象的参数。
<audio>
New
定义了声音内容
<video>
New
定义一个视频或者影片
<source>
New
定义了media元素的多媒体资源(<video> 和 <audio>)
<track>
New
规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)


以上是关于html5 audio 使用一般处理程序返回音频后，无法快进的主要内容，如果未能解决你的问题，请参考以下文章

js --自动播放音频

Html5之高级-5 HTML5音频处理(在H5中播放音频编程实现音频播放器)

HTML5 音频(Audio)元素使用详解

我应该如何使用 JavaScript/HTML5 处理繁重的音频负载？

注入 src URL 后 HTML5 音频不播放

处理器音频 JavaScript HTML5