html5 打包成adk,Cors Html5 Jquery / SoundManager wierdness
所以我在使用soundcloud api和html 5音频播放器时遇到了一些问题.
主要目标是仅使用html5访问所有公开的soundcloud音乐.
我使用以下内容.
//C# api call returning json object. Cut down version of the code as it isnt the issue.
var method "http://api.soundcloud.com/users/{0}/favorites.json"
var query = "?client_id=" + soundCloudClientId;
WebClient client = new WebClient();
return client.DownloadString(string.Format(method,artistId) + query);
我从soundcloud回来了.对于一些相关的测试用例再次减少
{
"Songs":
[
{
"Title": "Rio","Artist": "Netsky","Album": "","Duration": "03:49","Artwork": "https://i1.sndcdn.com/artworks-000120037955-m8t78n-t500x500.jpg","StreamUrl": "https://api.soundcloud.com/tracks/210032350/stream","Libary": "SoundCloud","TrackId": "210032350"
},{
"Title": "FreqAsia x Nasty Wizard - Episode 01","Artist": "Frequency Asia","Duration": "17:50","Artwork": "https://i1.sndcdn.com/artworks-000120265160-sn1a4k-t500x500.jpg","StreamUrl": "https://api.soundcloud.com/tracks/210368447/stream","TrackId": "210368447"
},{
"Title": "Episode 023 - June 2015","Duration": "44:15","Artwork": "https://i1.sndcdn.com/artworks-000120689935-24wvqo-t500x500.jpg","StreamUrl": "https://api.soundcloud.com/tracks/210995770/stream","TrackId": "210995770"
},{
"Title": "Porter Robinson - Flicker","Artist": "Porter Robinson","Duration": "04:39","Artwork": "https://i1.sndcdn.com/artworks-000086441918-ds0915-t500x500.jpg","StreamUrl": "https://api.soundcloud.com/tracks/160632928/stream","TrackId": "160632928"
}
]
}
这是通过我的页面上的ajax调用,然后结果我在页面上渲染出一堆html,并绑定到onclick函数,看起来像这样.
$.ajax({
url: 'http://api.soundcloud.com/tracks/' +
widget.get("TrackId") +
'/streams?' +
'client_id=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' +
'&format=json&_status_code_map[302]=200',dataType: 'json',method: "GET",success: function (resp) {
$("#myAudio").attr("src",resp.http_mp3_128_url);
$("#myAudio")[0].play();
},error: function (req,status,err) {
console.log('something went wrong',err);
}
});
$(“#myAudio”)等于的地方
src=""
crossorigin="anonymous"
type="audio/mpeg"
controls="controls"
style="width: 100%">
Your user agent does not support the HTML5 Audio element. Woof..
现在这适用于我的大约一半的歌曲.
适用于Rio – NetSky – 210032350.
然而对于波特罗宾逊 – 闪烁 – 它没有.我被抛出以下错误:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cf-media.sndcdn.com/nwtEnjuJwESE.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vbnd0RW5qdUp3RVNFLjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0MzY4NDc2NDV9fX1dfQ__&Signature=JN5bWI9dRW6a-KAczl0tjeTdoKmSa5BS8eGdI3I9E~NX9N~L-E9M2LRuCSuOc0jN0vk53VodFvwtArHfnFpedZjlo-7fmRwKMcZd5LAkGvCww0OiAztuzk4GESmLF8zE8RhKOF5UlNCJNLPZYM2BLgZPuMzsfLeQSLGPDbCHkiJazXZYoPjWKS8x3AYq4IBuwrzHsDOPT3GJN0XU89ugCm8x-cEZX946udYeRNrTwVUsVpTGjXwBE8zxRIE8AZFssptJsb9rCDpq9AlSoVBmII7RqYC264R9eovCqH8OTHGrQaeCQ9sXncwckjLpa70bjouCT-1UV6ampEIs9wTaKQ__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ. (Reason: CORS header 'Access-Control-Allow-Origin' missing).
作为一个奇怪的怪癖,如果我在更改了src之后从我的页面中删除了crossorigin =“anonymous”(手动在firbug中)它会播放歌曲(正确).
更糟糕的是,之后所有歌曲都播放但没有声音>:S.
从头开始删除crossorigin =“anonymous”无效.
但是,如果我使用soundmanager方法,它似乎工作正常.
SC.stream(
"/tracks/" + widget.get("TrackId"),{
useHTML5Audio: true,multiShotEvents: true
},function (sound) {
// This is Pure Evil
$("#myAudio").remove();
sound.play();
var newPlayer = $(sound._player._html5Audio);
newPlayer.attr('id',"myAudio");
newPlayer.attr('type',"audio/mpeg");
//newPlayer.attr('crossorigin',"anonymous");
newPlayer.attr('controls',"controls");
newPlayer.attr('style',"width: 100%");
$('#AudioPlayerContainer').append(newPlayer);
audio = $("#myAudio");
audio[0].play()
}
);
现在回到问题的核心.
html5方法和Sound Manager方法都使用get请求命中以下url.
https://cf-media.sndcdn.com/nwtEnjuJwESE.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vbnd0RW5qdUp3RVNFLjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0MzY4NDc3MDl9fX1dfQ__&Signature=w9wbiSg6eYJd6LESarJl4hbTNPwEMa0tV8q1rC30E~b5UcicVw~mkR6RfMaY4pYSE489nNFjXUTTPUYJ-2T6BHnarxBl8YcRsmAsRbp3BzI6AlkutzqV4LOTma0r08WA9CpuMRJRyOnfwA271sQeYz~FkKadkTs1zKTyBbKc~WxAQvqkfwXimYpAynWmGuw7mFc-AEXEQ9wwPDBj6EJD5R1NtvBPia-jtJEdfO39I4BIwGGLeu57xIQk0GcYWhJ2rEspmfDh~Z99dKW0H5tGNC3UyVGG7cb-PKiyVOkIdKRz3paqZ6~Xu65nMC5EVD1dc7T8~sYTLsUVJkNu~aySuw__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ
Html5请求和响应标头
Host: cf-media.sndcdn.com
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:41.0) Gecko/20100101 Firefox/41.0
Accept: audio/webm,audio/ogg,audio/wav,audio/*;q=0.9,application/ogg;q=0.7,video/*;q=0.6,*/*;q=0.5
Accept-Language: en-US,en;q=0.5
Origin: http://localhost:58434
Range: bytes=0-
Referer: http://localhost:58434/Home/Main
Connection: keep-alive
Accept-Ranges: bytes
Age: 361541
Cache-Control: max-age=252460800
Connection: keep-alive
Content-Length: 4465057
Content-Range: bytes 0-4465056/4465057
Content-Type: audio/mpeg
Date: Thu,09 Jul 2015 23:49:29 GMT
Etag: "b46b442c81cdb2d253827a19291d2847"
Last-Modified: Mon,28 Jul 2014 11:56:24 GMT
Server: AmazonS3
Via: 1.1 5c5638d5b5fb0e5b90e36788792360f2.cloudfront.net (CloudFront)
X-Amz-Cf-Id: sSqydrdg2dAC7O1q3vUszcSKjd-qPAvtMbwijwwKF_MBZ3m1yHazcA==
X-Cache: Hit from cloudfront
x-amz-meta-bitrate: 128
x-amz-meta-duration: 279091
x-amz-meta-job: nwtEnjuJwESE
x-amz-version-id: RAqXwDop3vD2oYiHSW6PYUPyzsiuGp6H
Sound Manager请求和响应标头
Host: cf-media.sndcdn.com
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:41.0) Gecko/20100101 Firefox/41.0
Accept: audio/webm,en;q=0.5
Range: bytes=0-
Referer: http://localhost:58434/Home/Main
Connection: keep-alive
Accept-Ranges: bytes
Age: 361891
Cache-Control: max-age=252460800
Connection: keep-alive
Content-Length: 4465057
Content-Range: bytes 0-4465056/4465057
Content-Type: audio/mpeg
Date: Thu,28 Jul 2014 11:56:24 GMT
Server: AmazonS3
Via: 1.1 b93cfa23ea94b492bc1948ec35e51f94.cloudfront.net (CloudFront)
X-Amz-Cf-Id: 6KjUx89xvaKdOIvl-7IcrnNhhhnCVr2Fk_1Co-S4vt4KdytC6GfJDg==
X-Cache: Hit from cloudfront
x-amz-meta-bitrate: 128
x-amz-meta-duration: 279091
x-amz-meta-job: nwtEnjuJwESE
x-amz-version-id: RAqXwDop3vD2oYiHSW6PYUPyzsiuGp6H
请注意,Origin:存在于第一个请求中而不是第二个请求中.现在我试着摆弄.
How to make an AJAX-request look like a regular,normal request.
摆脱标题但无济于事.
那么实际的问题是如何让交叉原始请求像在声音管理器中一样正常运行?
/有没有明显的东西,我错过了造成这种情况.
____ Json P根据评论尝试____
$(document).ready(function () {
$.ajax({
url: 'https://cf-media.sndcdn.com/nwtEnjuJwESE.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vbnd0RW5qdUp3RVNFLjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0MzY5MjUxNDl9fX1dfQ__&Signature=bd0d9hCWuXTWtdkHMVJEAYMjOyT31G1nAt9Ak3A1kKHGvNu~Ix5SqJ75OHr~R1MlfaVX3scQoqu8LSTfRdZUgOKnzRVYUpZAIKBKC-vcmdy1LNW9ounvZDdgMU6o9th4wiO2fx3HEu~UDmrypW6SgmrHWt0Smp3S8l0ypt80iKESRJHdRYI6Y~dewta~f3CGe7Om8EfzO8ZDwieGVP2sxmrYCf6rnSNKwXtcH1OXmPdkcKEJiCrxNzL8xFfNI8ONXjHm6Vj05EFc6dYOEAIxvhMR6A~uqex7tytxFocrX9C0dCL~ND-89K7oSkWgBT28WgQ8fMySx7HTTHbc3gwd4A__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ',dataType: 'jsonp',async: false,success: function (data) {
$('#myAudio').attr("src","data:audio/mp4;base64,"+data);
$('#myAudio')[0].mAudioPlayer.load();
$('#myAudio')[0].mAudioPlayer.play();
}
});
});
html5 打包成adk,Cors Html5 Jquery / SoundManager wierdness相关推荐
- html5打包成flash,将HTML5转换为Flash(示例代码)
我正在广泛使用impress.js来创建大量的HTML5演示文稿.这些演示文稿需要在触摸屏信息亭上显示.不幸的是,处理信息亭的供应商表示只能在这些信息亭上显示Flash内容. 是否有解决办法(更改供应 ...
- html5打包成app不能拍照,vue项目打包成app无法使用input调用相机
问题描述:打包成app后使用input上传图片只能做到在文件夹中选取,不能实现拍照上传图片 解决方案: 1.利用HTML5 Plus的Camera调用相机 2.利用HTML5 Plus的IO来实现读取 ...
- swift 原生给h5发消息_Swift - 使用HTML5进行iOS开发(将HTML5打包成iOS应用)
下面简单介绍下如何把HTML5编写的页面编译成iOS应用,以及如何让页面与Swift代码进行交互.(本文代码已升级至Swift3) 1,使用UIWebView还是WKWebView来加载html页面 ...
- html ajax打包成app,利用HTML5与ajax完成拖拽上传文件
前言 基于ajax的异步模式的上传控件,基本功能如下: 拖拽上传(利用HTML5新增特定 拖拽事件 以及 event的dataTransfer属性) 单文件/多文件切换(利用php实现单/多文件上传) ...
- html5 app 原理,html5打包成app应用的原理是什么?
慕侠2389804 NativeScript我用过,其他听过但是没用过,但我觉的原理应该差不多,简单给你说说ns的原理.如果你使用过ns的话,你会发现其实和开发Angularwebapp基本没什么区别 ...
- html5改成块状标签,HTML5基本网页结构以及标签的改变
一.HTML5崭新的页面布局: 1.传统的HTML页面布局: 2.HTML5布局: 3.HTML5布局使用的标签: (1)header元素:header元素表示页面总的一个内容区块或者整个页面的标题: ...
- html5转换成mp4视频,HTML5的canvas动画转视频MP4
这是第三篇,主要是canvas画布上的流如何转为mp4视频并保存在本地 这也是刚刚从知乎的一篇文章和查阅MDN后在Chrome 85浏览器下测试成功的.具体兼容性未知,直接代码加注释说明下实现思路co ...
- 【cordova学习笔记01】h5打包成apk
1.用了三个星期学习了一下cordova,分别将html5打包成apk,加入cordova插件,创建cordova自定义插件,最后使用谷歌的开源代码写自定义插件,读取Android设备上的RS232串 ...
- html5游戏封装安卓,html5游戏移植到android并打包成apk,加广告《二》
html5游戏移植到android并打包成apk,加广告<二> 这篇则讲解开发集成,先看看工程目录结构 ? qqbrowser_sdk_v1.2.jar为X5内核sdk,下载注册开发者 B ...
最新文章
- 剑指offer: 面试题40. 最小的k个数
- python基本数据类型的结构和使用方法
- pyrealsense2 frame_metadata_value类(帧的元数据)(帧的元数据指可能针对每个单独的帧公开的一组只读属性)
- Vue2.x源码学习笔记-Vue实例的属性和方法整理
- 【转】基于jquery,bootstrap数据验证插件bootstrapValidator 教程
- Spring| BeanCurrentlyInCreationException: Error creating bean with name ‘‘xxx“
- ajax是宏任务还是微任务,(滴滴面试)事件循环Event Loop及微任务和宏任务的执行过程详解...
- 钱大妈关闭所有北京门店:低估了北京市场的难度
- 《人人都该买保险》读书笔记
- 计算机在线应用不能安装,教您电脑为什么安装不了软件
- 华为HG8240F光猫破解
- 科技开发规划VBS屌丝暗色调
- PCL安装与配置(Windows10+VS2017 )
- keil遇到FCARM - Output Name not specified, please check ‘Options for Target - Utilities‘解决方法
- 古剑奇谭2打砺罂10分钟过的方法!
- 结对编程项目——最长英语单词链
- 学术-物理-维空间:二维空间
- 位运算(异或、左移、右移)的运算规则
- hive窗口函数使用
- Win10-21H1自动安装IP1180打印机失败的解决办法
热门文章
- 反应离子蚀刻系统2022年全球行业分析报告
- 大学英语四级历年真题Word,PDF,和音频 下载
- 手机屏幕分辨率全面解析手机屏幕分辨率全面解析 - QVGA HVGA WVGA VGA 指什么
- 阿里云财务软件好会计-好会计财务管理系统介绍...
- python word转excel题库_将word版题库转换为Excel版
- android elf 加固_移动平台客户端应用安全加固解决方案
- 华硕K45VM安装win7 64位操作系统
- X登读书视频下载教程
- 2022年华为ICT实践赛网络赛道题库全(1107道题目)
- python函数递归法求一个数各位数之和_Python基础之内置函数和递归