用webpy+gae做一个隐藏播放文件地址的东东，失败了2 -半成功-优快云博客

本文介绍如何使用HTML5播放器结合jQuery实现动态加载MP3文件，并通过判断HTTP_REFERER来保护音频资源不被直接下载。文中详细描述了利用下拉菜单选择不同音频文件并动态更改播放器源地址的方法。

昨天说到失败了

想换一个html5播放器试试

其实

跟播放器根本没有什么关系

但是我还是换了一个播放器，http://kolber.github.com/audiojs/

号称

Mobile Safari (iOS 3+)
Android (2.2+, w/Flash)
Safari (4+)
Chrome (7+)
Firefox (3+, w/ Flash)
Opera (10+, w/ Flash)
IE (6, 7, 8, w/ Flash)

思路跟昨天还是一样的，仍然是判断HTTP_REFERER

但基于浏览器的不同特性，还是决定用jquery

先说结果，稍微掩盖下mp3地址，除非对方查看http请求，单从html代码上是找不到任何mp3地址的，ff和mathon3完美，maxthon2有点显示错位，chrome显示没问题，不能快进

step1 test.html中放一个audio标签，放一个被别人下载也无所谓的mp3，放在static文件夹里就好

<audio src="/static/12.mp3" controls="controls" name ="myaudio" id= "myaudio">
Your browser does not support the audio element.
</audio>

step2 再放一个select下拉框，用作控制

<select name="myLesson" id="myLesson">
  <option value="1">第一课</option>
  <option value="2">第二课</option>
  <option value="3">第三课</option>
  <option value="4">第四课</option>
</select>

step3，用change和ajax来控制audio标签的源地址

从模板里copy的，为了escape这个$符号，全都用$$

$$(document).ready(function() { 
var as = audiojs.createAll();
var audio = as[0];
$$("#myLesson").change( function() {
  var lesson = $$("#myLesson option:selected").val()
  alert(lesson)
  $$.ajax({
  url: "url" + lesson,   <!-- 在这里向code.py发起请求-->
  processData: false,
  cache: false,
  success: function(mp3url){
    alert(mp3url)        <!-- 在这里返回的是真正的mp3地址 ,除非对方也用firebug之类查看http请求-->
    $$("#myaudio").attr({ src: mp3url });
    <!--audio.playPause();-->
    audio.load(mp3url);
    audio.play();
  }
});
});
});

step4 codypy

url 匹配 '/url(\d)' , 'audio',

audio的class

    def GET(self,name):
         client = ''
         client =  web.ctx.env.get('HTTP_REFERER') 
         if (not client  == None ) and  client.endswith('test'):                 
           newurl = '/audio/' + name + '.mp3'   
           logging.info("newurl ::::::" + newurl)
           web.header("Content-Type", "text/plain") 
           return   newurl        
         else :  
           return  'stop download '

真实的mp3地址放在audio目录下，把audio下的mp3在yaml里按照上一篇的东东配一下就好